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.
Related
I have found plenty of answers about how to extract the value of an <option> tag, or the contents of the tag itself, `content here'
However, I am wondering if there is a way to select an option by the text value of the <option>text here</option> - in this case, using text here as a matching term.
I am building a pretty simple form for internal use - that will effectively limit the number of options in a second dropdown based on the selection of the first dropdown. However, since this is part of a CMS, using the value attribute of the block is not going to be a reliable effort. I know that the spelling and the wording of the text parameter of the dropdown is important, and will be what I need it to be.
I know this is not a good practice - believe me I know that. However, right now this is something I need to get done quickly and with as little time invested in this as possible. Without reinventing or redoing all the logic for this decade-old tool, I would opt for this route.
So, is it possible to filter by the inner text of the tag? I KNOW you can extract it, but we want to filter so we can limit the options the user can select from.
<select id="one">
<option value="a">eh</option>
<option value="b">bee</option>
</select>
<select id="two">
<option value="m">emm</option>
<option value="lw">lolwot</option>
<option value="p">dinner</option>
</select>
In this case, if they select 'b' from first drop down -- it will limit their selection to -only- lolwot on the second dropdown - removing emm and dinner.
Just to reiterate, I do not want to extract from a selected option. $('#two').find('option:selected').text() is not what I am looking for.
Yes, it's possible. Assuming that you want to keep the one having the inner text of lolwot, you can do the following:
[...document.getElementById("two").children].forEach((item) => {if (item.innerText !== "lolwot") item.remove()})
we get the item by id and its children inside the square brackets
we convert that to an array, so we have an array of children
we iterate this array
if the current item does not meet the criteria, we simply remove it
If you want to get the items to remove, then you can filter:
[...document.getElementById("two").children].filter((item) => (item.innerText !== "lolwot"))
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.
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
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.
I have a select that has dynamically created option option[0] always ends up being autofocused making my onchange not work if I want to choose the first option.
The index of the options matter so creating a " " option won't work.
Any ideas?
edit: The user creates an object. When the user saves the object, it creates a new option in the select tag. The user selects something from the select tag to go back to that object.
The autofocus is always on option[0] until they selected something else even if they created a new object/option so if they wanted to pick the first thing, but was on the second or third the user would have to click on another option first then click on the one they want.
What I want is that it doesn't focus on any of the options so that they could click on option[0] from the beginning regardless of whether they've selected anything from the dropdown.
Seems like a lot of work to workaround this issue, instead of changing one of your requirements. You say that the index corresponds to an index into an array of objects. Why can't you have the first option blank or "Select...", and then simply subtract one for your lookup into the array?
Or, have the values correspond to the array index, or use custom data attributes to store the array indexes? Seems like any of these would be easier than trying to force a consistent behavior for an unsupported functionality across multiple browsers.
A Select box always has one of its options selected (unless it doesn't have any options). You might need to use a different event (onclick, perhaps) and test the value to see if it has changed.
You can add a default empty selected option with:
<option selected="selected" disabled="disabled" hidden="hidden" value=""></option>
The select is empty by default, with the void option not selectable in the options list.