I have a lot of select boxes in my application, being generated by lists of data and assigned to various ng-models.
I want to set the ng-model value to the first available option (respecting filters) of all select inputs globally in the app.
So for example a select input like this:
<select ng-model="entry.employee">
<option ng-value="employee.name" ng-repeat="employee in employees | filter:active">{{employee.name}}</option>
</select>
The entry.employee ng-model defaults to null, I need every select box to never be null but always select the first valid option of a select input by default.
It needs to be global as well and be generic enough to work with any type of select input.
Here is the data:
$scope.employees= [
{'name':'Bill'},
{'name':'Frank'},
{'name':'Ted'},
];
Instead of using ng-repeat on option elements use directly ng-option on select tag.
for example
<select class="form-control" ng-options="item.name for item in employees track by item.id" ng-model="selectedItem"></select>
in you controller use:
$scope.selectedItem=$scope.employees[0];
your object would be like:
$scope.employees= [
{id:'1','name':'Bill'},
{id:'2','name':'Frank'},
{id:'3','name':'Ted'},
];
In this case let you select tags be 'n' numbers but whenever you want you ng-model to be the first one just initialize it with the first element in your Object.
Also there is a good thing using ng-option is whenever you want to change the value of the select element at runtime you just need to update the selectedItem element.
Hope this resolves your query
Related
I'm working on angularjs app, and I can't find the answer for simple question. I've got an select with ng-options, when array that is set for options has more then one object inside the select is empty on start, but when array has only one element it automatically set it as default value. I need this select to be empty at the begining all the time, is there any solution?
in angularJS you may separate the variable used to fill in your options values and the model that stores your selected value.
See that example :
//Model used to store selected values
<select class="form-control" ng-model="myModel.country">
//I have a $scope.countries array of country
<option ng-repeat="country in countries" ng-value="country" required>{{country.name}}</option>
</select>
Hi Can any one let me know how can I make ng-options to select from multiple collections based up on a condition.
<select class="form-control" data-ng-model="model1" data-ng-options="tmp.Name as tmp.Name for tmp in Temp.Names.FiltereDepartments"><option value="">Select Value</option></select>
In the above code instead of FiltereDepartments, I want to change the value of this to property based up on a condition, is this possible to achieve using ng-class or which one can I use with in select clause to check for conditions and change the collection name accordingly.
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 have a select lists with currencies. Its made like this:
<select ng-model="model.currency">
<option value="USD">Amercian Dollars</option>
<option value="EUR">Euro</option>
</select>
I need to find a way so that the option text changes when I select an option. I tried an ng-change but I cant find a way to set the option text. Just to clarify:
The value should be the currency code
The selected text shown should be the currency code
If I click on my select the list of options should be the fullname
So whats missing in the scenario above is to set the value as text when selecting it.
select is a special directive in AngularJS. You need to declare ng-options and set options in controller.
In Angular 1.2.11, given a controller with:
$scope.produce = { 'apples' : [{ 'variety' : 'granny smith', 'price': 2.00}] }
And a view with
<select ng-model='fruits'>
<option value="0">More Fruits...</option>
<option ng-repeat="p.apple for p in produce" value="p">{{ p.variety }}</option>
</select>
How can I bind 'p' to the value attribute? If I try as above the model is bound as a JSON string, not as the model itself (as it would be if I were able to use ng-options).
I'm working around this now by using an ng-change function that uses the value bound to fruits as a lookup in $scope.produce, but this seems like a workaround rather than a solution.
EDIT: Sorry I wasn't more clear about this: I need to be able to hard code 1+ options into the select list, so using ng-options is not a solution.
Here are some fiddles to help illustrate my problem:
** Using ng-options **
ng-options allows for one element that it uses for creating a default option for use as a label. Two problems with this: if I try to use that <option> for its intended purpose I can't add a second option to the select. On the other hand, if I just try to add one <option> element, it gets placed at the top of the <select> list. No good.
** Using ng-repeat **
I'm unable to bind the model to the value attribute of the <option> element. Instead, the value is stringified JSON, which is not bindable.
You need to use ng-options:
<select ng-model='fruits' ng-options="thisFruit.variety in apples">
</select>
If you need to have an option selected as a default (your "More Fruits" option) then you need to add that to the data before it gets to the repeater, and also set your model $scope.fruits = 0 to make that selection selected by default.