I am making a html page to edit an item in angular. All the text inputs populate with the object in the $scope. The select list is populating but isn't selecting the option in the $scope object. This is the markup
<select data-ng-model="myItem.Category"
data-ng-options="c.Name for c in Categories"
data-ng-values="c.CategoryId for c in Categories"
data-ng-selected="myItem.Category" ></select>
Assuming each category has an id (or somme other unique field) use this:
<select data-ng-model="myItem.Category"
data-ng-options="c.CategoryId for c in Categories track by c.id"></select>
This will allow the matching of your model and option to be based upon id
The ng-model will define your selected value, and ng-options defines the items to show in the select.
Related
I am using AngularJS (1.5) and im trying to create a select dropdown that can display a different text when selected vs shown in dropdown options
Option example {id: 1, name: 'text', selected: 'this was selected'}
Given the example above, how can i show the name property when they open the dropdown but the selected property after the option is selected?
You have a couple options for dropdowns in angularjs. If you're going the ng-repeat route, then if you have an array of objects structured like your example, then this would work:
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="item.selected"> {{item.name}} </option>
</select>
This will display the "name" in the dropdown, but since value=item.selected, it will assign the "selected" value to your ng-model.
Alternatively, you can do ng-options for the select and something like this would work:
<select ng-model="selectedItem"
ng-options="item.selected as item.name for item in items">
</select>
This does the same thing, but ng-options tends to allow more flexibility as you can assign entire objects to your model rather than just strings like ng-repeat only allows, plus angular claims it's faster.
Hope this helps. See here for more info https://docs.angularjs.org/api/ng/directive/select
I have a <select> element populated with the acceptable values via ng-options and bound to a model with ng-model. It is possible that the model is set to a value that is not acceptable. (It used to be acceptable but no longer is.) In this case AngularJS renders the <select> as if it had an empty item selected.
Is there a way to have it render the selected value even if it is not listed in ng-options? I know I can put a default <option> inside the <select>. It's better than displaying an empty item, but it's a static string. I'd like to have the invalid value displayed.
Interesting problem. I think that you will be able to achieve this with the combination of ngInit directive to set up initial value (it can be missing from the allowed options list) and ngShow to hide it once valid option is selected.
Something like this:
<select
ng-init="preselected = selected"
ng-change="preselected = null"
ng-model="selected"
ng-options="item.id as item.name for item in items">
<option value="" ng-show="preselected">{{preselected}}</option>
</select>
Demo: http://plnkr.co/edit/lUTR0pHDPecU0OUUwjzt?p=preview
I want use select in angularjs.
I have a json that every element have 2 part: name and value. I want show name in dropdown and when user select one of theme, value is copy to ng-model.
$scope.list = [{name:"element1",value:10},{name:"element2",value:20},{name:"element3",value:30}];
For this I have 2 way to use select:
ng-options:
I use ng-options like below:
<select ng-model="model.test" ng-options="element.name for element in list"></select>
It's work correctly, but when I select each of element, I want just value of element is copy to ng-model, but a json is copy to ng-model, like below:
$scope.model.test = {name:"element1",value:1}
I can resolve this problem in angular controller, but I want find a better way that resolve this problem.
For resolove this problem, I use second way:
2.use ng-repeat in options:
<select ng-model="model.test">
<option ng-repeat="element in list" value="{{element.value}}">{{element.name}}</option>
</select>
In second way, just value is copy to ng-model, but as a string type:
$scope.model.test = "10";
I use below code, but all of them return a string value to model.
<option ng-repeat="element in list" value={{element.value}}>{{element.name}}</option>
<option ng-repeat="element in list" value="{{element.value}}|number:0">{{element.name}}</option>
<option ng-repeat="element in list" value={{element.value}}|number:0>{{element.name}}</option>
How can fix this problem?
you can resolve it with ng-options as well
ng-options="element.value as element.name for element in list"
please read this blog to understand more about ng-options.
Also another advantage of ng-options is, it binds the object as opposed to json string in case you want to attach the selected object to ng-model.
Have you tried this :
<select ng-model="model.test" ng-options="element.value element.name for element in list"></select>
btw, if you may have hundreds of records into your list, you should create your own directive, where you would manipulate your DOM with a simple javascript for loop
ng-repeat will be slow to be rendered,
ng-options adds every record into $watch.
I am having one text box and one dropdown.
I want filtering in ng-repeat section based on both of the above control.
Means if i select name in dropdown and in text box as I typing the filtering should work based on name
and if in dropdown if i select EployeeID then filtering should be work based on Employee.
<input id="txtSearchText" ng-model="searchText"/>
<select>
<option>name</option>
<option>EmployeeID</option>
</select>
<div ng-repeat="u in users">
name : {{u.name}} || EID: {{u.eid}} :
<!-- here i want result -->
</div>
The link that domakas directed you to above should help, but the example is slightly different since it filters using 3 different text input boxes.
You are missing a few things here. The first thing is you need to apply a filter to in the ng-repeat for the users div.
<div ng-repeat="u in users | searchText">
The problem that you run into here, which I am sure you are aware of is that it will filter on all of the values in the users array. You seem to want to only filter on the value in the users array that the dropdown has specified. This means we will have to tie the filter to the dropdown in some fashion to make it dynamic.
The way I would do this is to make the filter an object and not just pure text.
$scope.searchText = {name: '', eid: ''};
Now you need to have the model of your input box tied to this object, but where it stores the value needs to be dynamic based on what the value of the dropdown
<input id="txtSearchText" ng-model="searchText[filter]" />
<select ng-model="filter">
<option value="name" selected>name</option>
<option value="eid">EmployeeID</option>
</select>
The above code will store the value of the dropdown in the correct value of the searchText object. This means that the filter will now use this object to filter out the results in the users div instead of just a string, which it would compare to the full JSON object.
Edit:
Added a watch on the 'searchText' object to clear the other value if the dropdown is switched. Without this the old filter value was still in the 'searchText' object, which caused it to filter on both values.
$scope.$watch('filter', function() {
if($scope.filter == "eid") {
$scope.searchText.name = '';
} else {
$scope.searchText.eid = '';
}
});
Here is a JSFiddle with a working example:
http://jsfiddle.net/glandrum101/NM5A5/1/
I'm using a select tag with a ng-model attribute. I get the value of the selected element in ng-model. How is it possible to also get the label of the selected element.
I would like to retrieve both the label and its value. Thanks.
I'm guessing you are either using ng-repeat to create your choices, or typing them manually in the template. It is possible if you set your labels and values in the same model. If you have:
$scope.choices = {
"choiceone" : "The first Choice",
"choicetwo" : "The second Choice",
"choicethree" : "The third Choice"}
You can implement them like so:
<select ng-model="choice">
<option ng-repeat="(key, value) in choices" value="{{key}}">{{value}}</option>
</select>
However, this isn't the best way to use the select directive (assuming this is what you are doing). The select directive has a ng-options attribute that defines both value and label, in a cleaner fashion. I've edited the doc's example Plunkr on this subject, including a example usage of a ngRepeat here: http://plnkr.co/edit/sjQuhlgBh8WWJJoaSSMG?p=preview
Check here for the docs on the ng-options attibute: http://docs.angularjs.org/api/ng.directive:select