I am having an issue with my select form. When I select any option, the value that is being passed is of a string type, instead of number type. Here is my object that I use for ng-repeat:
$scope.apples ={
0:'Apple0',
1:'Apple1',
2:'Apple2',
3:'Apple3'
};
And here is my select, which passes string, instead of number:
<select ng-model="test" ng-options="key as value for (key,value) in apples"></select>
Any ideas?
Every time you're iterating on object fields, IMO, there is a design problem. Use an array:
$scope.apples = [
{
id: 0,
name: 'Apple0'
},
{
id: 1,
name: 'Apple1'
},
...
];
and in the view:
ng-options="apple.id as apple.name for apple in apples"
Very simple approach is to actually cast string to number (note, + operator):
ng-options="+key as value for (key,value) in apples"
It's also possible to use array as data structure:
$scope.apples = [
'Apple0',
'Apple1',
'Apple2',
'Apple3'
];
and then
ng-options="apples.indexOf(apple) as apple for apple in apples"
Related
I am using ng-options to populate my select. I assign the value to be the id of the field however I need to assign the description of my option as well.
Not sure how to do that without iterating through my list separately afterwards to find the matching id.
So I am assigning the user's id to the vm.model.user but how can I possibly assign name to a different variable and still make this generic. The key part is this being generic as the description name might vary (sometimes it's description or userDescription etc. and I cannot control that).
$scope.users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Adam' },
{ id: 3, name: 'Chloe' },
{ id: 4, name: 'Chris' }
];
<select ng-model="vm.model.user" ng-options="user.id as user.name for user in users | orderBy: 'name'"></select>
I have tried doing this on ng-change but it seems it is not aware of user, only ng-options is.
ng-change="vm.model.userDescription = user.name"
One solution would be to set ng-model with the the selected user object, so vm.model.user would have both id and name:
<select ng-model="vm.model.user" ng-options="user as user.name for user in vm.users | orderBy: 'name'"></select>
Check demo: DEMO
I found this interesting answer
https://stackoverflow.com/a/28323031/9559251
Basically we could just do
ng-change="vm.model.userDescription = (users | filter: {id: vm.model.user})[0].name"
js-fiddle: https://jsfiddle.net/4z5ufbuu/
I'm trying to select a value from an array I have via a select option. here are my options:
$scope.categories = [
{ type: "Web Application", cssClass: "webApplication" },
{ type: "Unity", cssClass: "unity" },
];
$scope.filterValue = "";
I have it so the select displays the "type" but I want the "filterValue" to represent the cssClass.
I have seen this page:
https://stackoverflow.com/a/12384319/9132034
but dont really understand this answer:
obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>
guidance would be absolutely perfect or even the solution but that is up to you :)
You need to update your ng-options to be:
ng-options="item.cssClass as item.type for item in categories track by item.cssClass"
This is saying to use item.cssClass as the value while displaying type as the label
it is documented in the angularjs official documentation https://docs.angularjs.org/#ngOptions-info
Edit: updated JS Fiddle https://jsfiddle.net/4z5ufbuu/4/
I have a array of object { id:x, name: 's' } and using ng-options to create drop down with default selected data. This is working fine so far.
Now when I select one of the option and see the selected data, it return complete object but i need only name field as well as default value must be selected on load.
// in controller
vm.teams = [
{
id: 1,
name:'First'
},
{
id: 2,
name:'Second'
},
{
id: 3,
name:'Third'
}
];
vm.teamFormData = {
team: ''
};
vm.getTeam = function(formData) {
$log.debug(formData); << here I get object
}
// in View
<select ng-init="vm.teamFormData.team = vm.teams[0]"
ng-model="vm.teamFormData.team"
ng-options="t.name for t in vm.teams track by t.id" >
</select>
Here is my working plunker
Your ngOptions syntax is slightly off - it's value as text for item in array
ng-options="t.name as t.name for t in vm.teams track by t.id"
And your ngInit then becomes
ng-init="vm.teamFormData.team = vm.teams[0].name"
Side note - you probably don't want ngInit - there's no real use case in your above example for it. Instead, just set the property in the controller.
See plunkr: https://plnkr.co/edit/7SGIdtfjucMnMqiEa7JY?p=preview
Iam Learning AngularJs ...
Example : -
My Json Having an array with some values as types :-
Lets Say A Restaurant would be Mexican or Italian Etc
My example
{
name:'res 123',
description:'Italian Rest'
types:['Mexican','Indian']
}
<input type="checkbox" data-ng-model="Mexican"/> // Iam Using Textbox Oncheck Filter Need to Filter all the Objects with types:['Mexican']
Filter Code :-
<div class="col-xs-12" data-ng-repeat="obj in objs| filter : objs.types[1]: Mexican" > <!-- Filter applied Like this -->
Realted looping
</div>
How can i Apply filter by taking the types:['Mexican'] value as Input for Filter On check ?
A built-in filter in Angular accepts a hash that specifies by what properties to match against each element in an array.
So, if you have an array of restaurants:
var restaurants = [
{ name: "foo", types: ["Mexican", "Indian"] },
{ name: "bar", types: ["Mexican"] },
{ name: "baz", types: ["Italian"] }
];
then if you need to filter by name, the input to filter would be {name: 'b'} - which would give you "bar" and "baz".
Likewise, if you need to filter by types - even though it is an array - a similar approach would work: {types: "Mexican"}.
And so, you just need to construct that object - let's call it filterBy.
<input type="checkbox" ng-model="filterBy.types"
ng-true-value="'Mexican'"
ng-false-value="undefined"> Mexican
<div ng-repeat="r in restaurants | filter: filterBy>
{{r.name}}
</div>
Demo
I'm trying to bind a specific value of an array of objects on an ng-repeat in a table with in-line editing.
The problem that I'm encountering is that my object doesn't have the same value on each ng-repeat.
Example object:
var products = [{
id: 1,
value: 20
},
{
id: 2,
value: {
finalValue: 30,
customValue: 10
}
}];
To my knowledge if I return just the primitive value it won't be binded. I have the property names to get to the specific value on each ng-repeat. For example I have on my first iteration the way to get to the value is just value and the second one has to be value.finalValue.
To my knowledge... to bind the value I can not return just the primitive value 20 or 30, I have to return an object. So my first try was to create a function in my controller that does a property.split('.') and return an array with the object that contains the value and the property to get to it.
Eg) on my first iteration it would return:
[{ id: 1, value: 20 }, 'value']
On the second iteration it would return:
[{ finalValue: 30, customValue: 10 }, 'finalValue']
And now this will be binded to the actual model, but how can I display this on my template?
I can do something like:
<div ng-repeat="product in products>
{{ getValueObj(product) }}
</div>
But how can I display the value itself? Something like results[0][results[1]] ?
Why not on your ngRepeat do something like:
ng-repeat="product in products"
and in your binding do something like:
{{product.value.finalValue || product.value}}
The full example will be something like:
<div ng-repeat="product in products>
{{product.value.finalValue || product.value}}
</div>