I'm working on this dynamic filter system using AngularJs and trying to figure out how to convert the color and size options to be in two dropdowns (one for each category).
I've tried the following code which does successfully add the dropdown along with the options in the select box, but upon click of one of the options, it doesn't select it.
<md-select ng-model="filter[cat][value]" placeholder="val" multiple>
<md-option ng-repeat="value in getItems(cat, data)" ng-value="{{value}}" ng-init="filter[cat]={}">
{{value}}
</md-option>
</md-select>
Demo: https://codepen.io/mikelkel/pen/rwQKRm (Above code had been removed from this demo.)
There are a few issues:
According to the documentation, multiple is a boolean so it needs to be multiple="true".
value in ng-model doesn't exist in that scope since it only exists in md-option, so you can't do filter[cat][value]. If you look at the documentation for md-select you will see that when using multiple the model is an array. So if you set your ng-model to simply filter[cat] then its value will be something like ["red","yellow"].
You can then modify filterByPropertiesMatchingAND so that it does a string match against like properties (so if the shirt color is red and the filter.color array contains red then you would return true).
I forked your codepen (https://codepen.io/czema/pen/KqbpPE) and made the following changes:
Even though ng-init is frowned upon I left it, but I initialized the filter[cat] to an array rather than an object.
I removed the md-item.
I set ng-model to filter[cat] and multiple="true"
In the Javascript I modified your filterByPropertiesMatchingAND function. Now it expects $scope.filter contain arrays for each property (rather than an object with color names and boolean values). I dropped the noSubFilter function.
Use ng-options in select rather than ng-repeat on the option tag. The syntax for ng-options is a little odd, but it would be something like this in your case: ng-options="value for value in getItems(cat, data)"
Read the documentation for ngOption https://docs.angularjs.org/api/ng/directive/ngOptions
As far as why your attempt above doesn't work, probably has something to do with the ng-init, which is being executed for each option and is probably wiping out any existing data. Don't use ng-init.
Related
I am trying to create a multiple select input element in Ember, where the content is coming from a hash, containing the label, value and group for the different options. This works fine, however I am not able to access the value binding.
Here is the JSBin; after submitting the form, it logs the selectedField variable to the console which is always 'undefined'.
I would like to implement the binding so that the initial contents of selectedField are preselected.
Update: I now see that the value method is unsupported for multiple selections, but then how do I pre-select and retrieve the selections?
Solved: I need to bind the Select via 'selection' (see JSBin).
I add a task, then click edit, the priority dropdown menu isn't render. I wonder what's is wrong. Take a look my full code here
http://jsfiddle.net/U3pVM/3801/
it appear to be {{task.priorty}}, not rending with ng-model?
Try this in the second drop-down
<select ng-show="editable" ng-model="task.priorty" ng-options="priority.level as priority.level for priority in priority">
</select>
Fiddle
You needed to add the model of the selected task to the edit drop-down list. Also, you had to specify that the value of each item in the edit drop-down is the level property.
In the first drop-down, you are selecting the entire priority object as the value of each drop-down. However, you only assigned the priority.level to task (and not the entire priority object). Hence, in the edit drop-down, the priority.level as... specifies that you are trying to match the level property alone with your model.
You forgot to add ng-Model to your second select (without ngModel your select control won't work).
Example:
<select ng-show="editable" ng-model="selected_priority2" ng-options="priority.level for priority in priority">
<option value="">{{tasks.priorty}}</option>
</select>
Updated your jsFiddle
Trying to create a set of select options from a simple list, instead of an array or an object that would have keys. All the docs & examples I find are pertaining to keyed data types.
$scope.numbers = ['tweedle', 'beetle', 'battle'];
Using the code below, the select list renders fine on load.
<select ng-model="fox" ng-options="item for item in fox"></select>
After you make a selection, it splits the selection value into a comma separated list. Try selecting and item, then selecting a different item.
I'm sure it has something to do with the binding, but I can't put my finger on it:
http://jsfiddle.net/LR6DL/1/
It's because you're setting the ng-model of the select to fox. fox is also what your options are set to, so your options array is being over written with the selected value (string) - which then gets split to letters to satisfy the ng-options directive.
Short solution:
Change your ng-model to selection and your input to selection as well.
Demo: http://jsfiddle.net/LR6DL/2/
I'm new to angular and I'm finding that working with a select to be a bit tricky. I'm creating a select element:
<select ng-model="userToAdd.CollegeCode">
<option ng-repeat="college in colleges" value="{{college.CollegeCode}}">{{college.CollegeName}}</option>
</select>
in ng-model I was able to bind to userToAdd.CollegeCode, but I would also like to bind the text to userToAdd.CollegeName. So far I'm unable to find an example of this. Second, the select is bound to userToAdd.CollegeCode when the object is updated the select option does not select that value. It always starts at the first element. Can someone point me in the right direction?
You should have a $scope.selectedCollege property in your controller, so when a code is selected you can set the corresponding college object as the currently selected object (not sure if you have to iterate all your college objects and find the one, I don't have any code - i would put an ng-click="selectCollege($index)" on the option).
That way you have all possible properties of a college in hand not just the code or the name.
That should resolve both of your issues, as you would retrieve the college name of the newly selected object from $scope.selectedCollege.name.
I am trying to update the selected value in one of the select boxes using knockout. But I am not able to do so. Here is the jsfiddle link - http://jsfiddle.net/5MauG/1/
When I click on the click me span, I expect that the selected value in the select box should change.
You're problem is that trying to set the selected option to a new object won't work. Even with the same values, the new object is not the same as the old object. You can see that in this slightly modified fiddle; it works when actually choosing from the objects in the options array.
With an array of values, like strings or ints, you can select by value. With an array of objects, you need to select with the actual object. This will be easier if your view is using the bindings everywhere, because the bindings will represent the actual objects.