I'm using angular chosen plugin for selecting an attribute on any select element.
My data is in this format:
$scope.pets = [
{
id: '1',
name: 'Dog',
desc:"Something"
},
{
id: '2',
name: 'Cat',
desc:"Something"
},
{
id: '3',
name: 'Rat',
desc:"Something"
}
];
And the angular choosen implementation for displaying the name using ng-options is:
<select multiple ng-model="myPets" ng-options="r as r.name for r in pets" chosen>
I'm able to get the drop down using ng-options for the above data like this,
But how can I bind the default values into the angular choosen input box if my ng model is bind to the following object:
$scope.myPets= {
id: '6',
name: 'Pig',
desc:"Something"
},
You can set the default values in the controller by using
$scope.myPets= [$scope.pets[0], $scope.pets[5]];
Compared to what you were thinking you need to use an array [] because you are using select multiple. You also have to directly refer to the existing objects or angular/javascript won't recognize the connection.
Related
I am generating comboboxes dynamically and I need to pass a different collection to the ng-repeat every time.How can I do that?
<div ng-repeat="choice in $ctrl.inputFilterRows">
<md-select ng-model="choice.name">
<md-option ng-repeat="filter in $ctrl.filters" value="{{filter.value}}" >
{{filter.value}}
</md-option>
</md-select>
</div>
Tried to set from the controller, but didnt work:
self.inputFilterRows[0].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];
An idea would be to use ng-if on several md-select elements and decide which one to enable based on a condition that suits you.
Another is to have a $scope variable that is linked to a single ng-repeat select, but you keep assigning new values to that $scope variable collection whenever you want. That would force a scope redraw and the ng-repeat would now use the new collection values.
Second one is probably cleaner.
EDIT:
Based on a better explanation provided in the comments below I now realise that you want a set of selects, each with their own set of options.
To achieve something like that I would suggest having an array of arrays, in which each object would represent a select, and then it's contents would be the options for that select.
$scope.selectArray = [
{ name: 'colours', filters: [{ value: 'black' }, { value: 'red' }, { value: 'blue' }] },
{ name: 'months', filters: [{ value: 'January' }, { value: 'February' }, { value: 'March' }] }
];
Now, you can have an ng-repeat iterating over selectArray (select in selectArrays) to create the selects, and then each one would contain another ng-repeat to iterate over the select.filters (filter in select.filters)
I am not going to write the exact code because you look like you know what you're doing and I'm sure you can put it together yourself very easily.
If you want to change the dataset of a specific select you can do something like:
$scope.selectArray[1].filters[0].value = 'December';
or
$scope.selectArray[1].filters = [{ value: 'June' }, { value: 'July' }, { value: 'August' }];
I'm still trying to find my way with AngularJS. I have a JavaScript code that uses URL to return JSON data as an array. I need help with populating the same data in select using ng-options.
data to populate on the select
This isn't how you ask for help, but nevermind. Given a JSON object like this
var JsonArray = [{
id: 1,
name: 'Jane',
address: 'Jane\'s house'
}, {
id: 2,
name: 'Jill',
address: 'Jill\'s house'
}, {
id: 3,
name: 'John',
address: 'John\'s house'
}, {
id: 4,
name: 'Jack',
address: 'Jack\'s house'
}];
When you want to use ng-select with ng-options, you need to specify 3 required fields :
your table
the name that every object will take (like a for ... each loop)
The property you want to see in your options
You also can specify a track by property to give your options a given value.
<select ng-model="mySelect" ng-options="object.name for object in JsonArray track by object.id"></select>
Now, use the last piece of code, and inspect it in a brwoser. You will understand everything.
For reference :
<select ng-model="mySelect" ng-options="[object].[chosenProperty] for [object] in [yourArray] track by [object].[property]"></select>
When I remove a comment on my HTML var {{selecionados}} selected from, and I click on the list of names is all fine, but when HTML retreat or comment on again no longer works.
<script async src="//jsfiddle.net/raphaelscunha/9cwztvzv/1/embed/"></script>
Vue.js will only update your view when a property within the data object is changed, not when a new property is added. (See Change Detection Caveats in the Vue.js guide)
If you want it to react when ativo is set to true, make sure the property exists beforehand.
Try something like this when you're initializing your Vue object:
atores: [
{ name: 'Chuck Norris', ativo: false},
{ name: 'Bruce Lee', ativo: false },
{ name: 'Jackie Chan', ativo: false },
{ name: 'Jet Li', ativo: false}
]
JSFiddle
I'm a pretty new in this area (one mounth) and I'm developing application with angularJs, I'm getting back Json requisition with a list, I have to put the name ({{empresa.name }}) when the user select I get the ID({{empresa.IdEmpresa}}).
I want use ng-repeat for that, something like (ng-repeat="empresa in empresas").
I'm getting the Json with the list from the JavaController, my Entity is named Empresa, I declare a empty object on angular Like that ( $scope.empresas = {}) and give the callback to this emprty object, right?!
My select field is like that
<label>Empresa</label>
<select class="form-control">
<option value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>
how do I use repeat in this ?
Assuming your JSON data look like this
$scope.empresas = [
{ EmpresaId: 1, name: 'one' },
{ EmpresaId: 2, name: 'two' },
{ EmpresaId: 3, name: 'three' }
]
Apart from using ng-repeat on <options>, you can also utilise ng-options
<select ng-options="e.EmpresaId as e.name for e in empresas" ng-model="???"></select>
You can use ng-repeat="empresa in empresas" on the <option> tags.
Here's an example:
<select>
<option ng-repeat="empresa in empresas" value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>
Controller Code
$scope.empresas = [
{ EmpresaId: 101, name: 'India' },
{ EmpresaId: 102, name: 'US' },
{ EmpresaId: 103, name: 'UK' }
];
http://jsfiddle.net/WcJbu/
When I select a person, I want the favoriteThing selector to display their current selection.
<div ng-controller='MyController'>
<select ng-model='data.selectedPerson' ng-options='person.name for person in data.people'></select>
<span ...> likes </span>
<select ... ng-model='data.favoriteThing' ng-options='thing.name for thing in data.things'></select>
</div>
$scope.data.people = [{
name: 'Tom',
id: 1,
favorite_thing_id: 1
}, {
name: 'Jill',
id: 2,
favorite_thing_id: 3
}];
$scope.data.things = [{
name: 'Snails',
id: 1
}, {
name: 'Puppies',
id: 2
}, {
name: 'Flowers',
id: 3
}];
Do I need to set up a service and add watches, or is there a [good] way to use the favorite_thing_id directly in the select?
Change the second select to this:
<select ng-show='data.selectedPerson' ng-model='data.selectedPerson.favorite_thing_id'
ng-options='thing.id as thing.name for thing in data.things'></select>
Adding the thing.id as to the ng-options will allow you to select the data.things entries based on their id's instead of their references. Changing the ng-model to data.selectedPerson.favorite_thing_id will make angular automatically change to the correct option based on selectedPerson.favorite_thing_id.
jsfiddle: http://jsfiddle.net/bmleite/4Qf63/
http://jsfiddle.net/4Qf63/2/ does what I want - but it's pretty unsatisfying.
$scope.$watch(function() {
return $scope.data.selectedPerson;
}, function(newValue) {
if (newValue) {
$scope.data.thing = $filter('filter')($scope.data.things, {id: newValue.favorite_thing_id})[0];
}
})
I'd like to see all of that be possible from within the select statement.
Maybe I'll try to write a directive.
association = {key: matchValue}
So that I can do
<select ... ng-model='data.thing' ng-options='t.name for t in data.things' association='{id: "data.selectedPerson.favorite_thing_id"}'></select>