Here is my json
This.selectedColumn = null;
This.dynamicCmbItems = [{
id: 1,
label: 'aLabel',
subItem: [
{
name: 'aSubItem1'
},
{
name: 'aSubItem2'
},
{
name: 'aSubItem3'
}
]
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
In html I have two <select>s, first one displays label and second one should display subitem->name of selected label Eg: if I select aLabel in my first dropdown then second dropdown should show subitem of aLabel. I am able to load the first dropdown. How should I load second dropdown?
html file:
<select ng-options="item.label for item in vm.dynamicCmbItems track by item.id" ng-model="vm.selectedColumn" ></select>
<select ng-options="item.subItem.name for item in vm.dynamicCmbItems" ng-model="vm.selected"></select>
i want to do something like
<select ng-options="item.subItem.name for item in vm.dynamicCmbItems | fileter: {item.label : vm.selectedColumn}" ng-model="vm.selected"></select>
ng-model on the first select already binds the whole object for you, so in the second select you can just use
<select ng-options="item.name for item in vm.selectedColumn.subItems" ng-model="vm.selected"></select>
Related
I have this array of objects. that holds somethings like this.
[
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
im iterating thru the array here
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>
The thing item.modifiers model that has an array of this 2 id
[
1,2
]
I want the multi select to auto selected the two ids that are in the item.model
I want the final result to look something like this
Your code is pretty much working already, maybe some of the variables are not assigned correctly (eg. id instead of _id)
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.modifiers = [
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
$scope.item = {};
// add this for pre-selecting both options
$scope.item.modifiers = [1,2];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>
If I understand the question correctly, you're wanting to pre-select the two options.
To do this you will need to set your ng-model to point to the actual objects you are iterating over.
You will also need to change your ng-options to ng-options="modifier as modifier.name for modifier in modifiers" rather than just iterating over the ids.
Here's the relevant documentation under Complex Models (objects or collections)
https://docs.angularjs.org/api/ng/directive/ngOptions
Something like this should work:
HTML:
<select ng-model="$ctrl.item.modifiers"
ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
multiple chosen class="chosen-select" tabindex="4" >
</select>
JS:
app.controller("my-controller", function() {
var $ctrl = this;
$ctrl.modifiers = [{
id: 1,
name: "Extra Cheese"
}, {
id: 2,
name: "No Cheese"
}];
$ctrl.item = {
modifiers: []
}
$ctrl.$onInit = function() {
const id1 = 1;
const id2 = 2;
for (const modifier of $ctrl.modifiers) {
if (modifier.id === id1 || modifier.id === id2) {
$ctrl.item.modifiers.push(modifier);
}
}
}
}
Here's a pen showing the result:
http://codepen.io/Lahikainen/pen/WooaEx
I hope this helps...
I have a product model that has a property I want to bind to a separate array of options. Basically by product model has a property called 'category', like this:
productModel = {
Id : 1,
Description: 'Widget',
Category: 0,
...
As you can see, the property is an int (from the db) but I also get a separate array of what the categories are:
Categories : [
{ "Number" : 0, Name : "N/A" },
{ "Number" : 1, Name : "Option 1" },
{ "Number" : 2, Name : "Option 2" }
]
I want to be able to have a select list with the corresponding value shown, so if the product model comes back with 0 set then the default value in the select list will be "N/A".
I have achieved this by doing:
<select ng-model="Categories[productModel.Category]" ng-options="v.name for v in Categories" ...
but the problem with this is that when I change the option the value isn't binding back to the model. Because the data is posted back the server when the user changes the value I don't really want to change the productModel to have the same Name and Number structure as the categories (I can do this if it is the best way). I really just want the user to be able to select an option and for the product model to contain the corresponding number.
Can I (should I) do this using the 'track by'?
You need to update your ng-model value to bind to productModel.Category, you also need to update your ng-options expression to the following ng-options="v.Name as v.Number for v in categories".
You can find more information regarding the ng-options and ng-model directives here.
Please see working example here
HTML:
<div ng-controller="TestController">
<select ng-model="productModel.Category" ng-options="v.Name as v.Number for v in categories"></select>
<h3>productModel.Catecogy => {{productModel.Category}}</h3>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.productModel = {
Id: 1,
Description: 'Widget',
Category: 0
};
$scope.categories = [{
"Number": 0,
Name: "N/A"
}, {
"Number": 1,
Name: "Option 1"
}, {
"Number": 2,
Name: "Option 2"
}];
}]);
Not relevant to the question but its good practice to try and keep the case of your properties and variable names the same.
I am trying to filter a list by a property that is set by a dropdown:
<select ng-model="filterItem" ng-options="item.name for item in filterOptions.stores">
</select>
This is the the data for the dropdown:
$scope.filterOptions = {
stores: [
{id : 2, name : 'Show All', rating: 6 },
{id : 3, name : 'Rating 5', rating: 5 },
{id : 4, name : 'Rating 4', rating: 4 },
{id : 5, name : 'Rating 3', rating: 3 },
{id : 6, name : 'Rating 2', rating: 2 },
{id : 7, name : 'Rating 1', rating: 1 }
]
};
The filter is actually not working properly through the rating property: it returns more that just the one selected property:
<li data-ng-repeat="item in data | filter:filterItem.rating" >
Name: {{item.name}} Price: {{item.price}} Rating: {{item.rating}}
</li>
How can I fix the filter here?
This is a plunkr:http://plnkr.co/edit/vAebEb?p=preview
Right now you are setting filterItem.rating as the filter, so you're setting a string as the filter. From docs (https://docs.angularjs.org/api/ng/filter/filter):
The string is used for matching against the contents of the array. All
strings or objects with string properties in array that match this
string will be returned. This also applies to nested object
properties. The predicate can be negated by prefixing the string with
!.
What this is doing is matching ANY property in your array with the value filterItem.rating; so product's with the number in their product name are also being matched.
Since you want the filter to ONLY apply to the rating property, you want to set an object like this:
<li data-ng-repeat="item in data | filter:{rating:filterItem.rating}" >
That will now filter properly, but Show All doesn't work properly since filterItem.rating is undefined when it's show all. Since we don't want the filter to apply when Show All is selected, you can check for the filterItem.rating property first:
<li data-ng-repeat="item in data | filter:filterItem.rating && {rating:filterItem.rating}" >
I've updated your Plunkr here: http://plnkr.co/edit/q5Ns8c6HN1eIGZANlI4s?p=preview
You need to make a couple of changes:
In your $scope.filterOptions.stores object: Remove the rating for Show All option like:
{id : 2, name : 'Show All'},
In your html where you are using filter:
<li data-ng-repeat="item in data | filter:filterItem.rating && {rating:filterItem.rating}">
Hope this helps.
I'm binding a select element to data that looks like this:
var gearConditions = [
{ id: 1, value: 'New' },
{ id: 2, value: 'Like New' },
{ id: 3, value: 'Excellent' },
{ id: 4, value: 'Good' },
{ id: 5, value: 'Fair' },
{ id: 6, value: 'Very Used' },
{ id: 7, value: 'Other' }
];
My select looks like this:
<select name="condition"
class="form-control"
ng-model="postModel.condition"
ng-options="condition.id as condition.value for condition in gearConditions">
</select>
This binds condition.id to the ng-model and displays condition.value as the select option. My question is: can I keep the current behavior but bind the whole object to the ng-model?
For example if the first option is selected the model value would then be {id:1, value: 'New'} rather than just 1.
Is this possible or do I need to use ng-changed to accomplish this?
Thanks!
Yes, change condition.id to condition:
ng-options="condition as condition.value for condition in gearConditions"
I think you you try similar:
// I took this from my code
ng-options="key as value for (key, value) in ...
Now you could try to combine key+value and see if it appears like you wish.
I have a <select> that I am populating with a list of values. Everything works and I see the expected list. But now I would like to have the value set to a locally stored value if available.
I have the code below. When I run this code the number after the Type in the label changes to match that in the localstorage but the select box does not change.
getContentTypeSelect: function ($scope) {
entityService.getEntities('ContentType')
.then(function (result) {
$scope.option.contentTypes = result;
$scope.option.contentTypesPlus = [{ id: 0, name: '*' }].concat(result);
$scope.option.selectedContentType
= localStorageService.get('selectedContentType');
}, function (result) {
alert("Error: No data returned");
});
},
<span class="label">Type {{ option.selectedContentType }}</span>
<select
data-ng-disabled="!option.selectedSubject"
data-ng-model="option.selectedContentType"
data-ng-options="item.id as item.name for item in option.contentTypesPlus">
<option style="display: none" value="">Select Content Type</option>
</select>
Here is the code I have that sets the value in localstorage:
$scope.$watch('option.selectedContentType', function () {
if ($scope.option.selectedContentType != null) {
localStorageService.add('selectedContentType',
$scope.option.selectedContentType);
$scope.grid.data = null;
$scope.grid.selected = false;
}
});
Here is the data stored in contentTypesPlus:
0: Object
id: 0
name: "*"
__proto__: Object
1: b
id: 1
name: "Page"
__proto__: b
2: b
id: 2
name: "Menu"
__proto__: b
3: b
id: 3
name: "Content Block"
__proto__: b
How can I make the select box go to the localstorage value if there is one?
Update
Still hoping for an answer and I would be happy to accept another if some person can help me. The answer given is not complete and I am still waiting for more information. I am hoping someone can give me an example that fits with my code. Thanks
I think you need to make sure selectedContentType needs to be the id field of the option object according to the comprehension expression defined in the select directive.
The comprehensive expression is defined as
item.id as item.name for item in option.contentTypesPlus
item.id will be the actual value stored in the ng-model option.selectedContentType
Say this is your select with ng-model
<select
ng-model="language.selected"
ng-init="language.selected = settings.language[settings.language.selected.id]"
ng-options="l.label for l in settings.language"
ng-change="updateLanguage(language.selected)">
In your controller
$scope.settings = {
enableEventsNotification: true,
enableiBeaconNotification: true,
hours: [
{ id: 0, label: '3h', value: 3 },
{ id: 1, label: '6h', value: 6 },
{ id: 2, label: '9h', value: 9 },
{ id: 3, label: '12h', value: 12 },
{ id: 4, label: '24h', value: 24 }
],
language: [
{ id: 0, label: 'English', value: 'en-us' },
{ id: 1, label: 'Francais', value: 'fr-fr' }
]
};
$scope.hours = [];
$scope.hours.selected = $localstorage.getObject('hours', $scope.settings.hours[1]);
$scope.settings.hours.selected = $localstorage.getObject('hours', $scope.settings.hours[1]);
$scope.hours.selected = $scope.hours.selected;