I am using select, in which I require selected value and dynamically created index (I don't want to set default to [0] index)
How it can be done.
<div class="input-label">
Select Mobile
</div>
<select ng-model="mobile" ng-options="mobile as mobile.value for mobile in editContactModalData.phoneNumbers"></select>
</label>
Above is select option and below is input box where the selected value is set
<label class="item item-input item-stacked-label" ng-show="mobile">
<input type="tel" maxlength="10" placeholder="mobile" ng-model="mobile.value">
</label>
this is one modal and I want to show these changes of selected mobile in another modal
the second modal consist
<span>{{contact.phoneNumbers[0].value}}</span>
so in this in the place of [0] index i want to put dynamically selected value.
#Nikhil: First thing ngOptions doesn't support $index like ng-repeat.
If you needed index of that value than you can try like this.
<select
ng-model="select"
ng-options="values.indexOf(selectedItem) as selectedItem for
selectedItem in values">
</select>
You can use ng-change and assign value to contact like
<select ng-change="setNumber(mobile)" ng-model="mobile" ng-options="mobile as mobile.value for mobile in editContactModalData.phoneNumbers"></select>
In controller just set value:
$scope.setNumber = function(num){
$scope.contact = num.value;
}
Then this will show in view
{{contact}}
Related
I have a Simple Multiselect checkbox dropdown. As I have given below.
<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" required>
<option ng-repeat="service in services" value="{{service.id}}">{{service.name}}</option>
</select>
Now I want that some checkbox like index 1,3,5 comes with selected checkbox.
My AngularJS Code is given below.
$scope.article_edit = function(articles) {
$scope.services = [$scope.model[0], $scope.model[1]];
}
Then What I need to do for that ??
Thanks
Why not use ng-options which has good support & also ng-model on select field. So your template can be:
<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple=""
required ng-model="selected" ng-options="service as service.name for service in services">
</select>
Working plunker example
I have created multiple select option drop-downs. Now I want to assign default selected values to the multiple select options. I have created code and it's working fine but the problem with the options value. I want id as a value in options.
javascript:-
$scope.availableOptions = [{"client_id":"62024","client_name":"Advantage Land Co"},{"client_id":"59194","client_name":"Alpha - Brookings, SD"},{"client_id":"62413","client_name":"B and B Auto"},];
$scope.simpli_client = {};
$scope.simpli_client =["62024", "62413"];
and php code:-
<select id="multiSelect" class="ng-pristine ng-valid form-control" multiselect="" multiple="" ng-model="simpli_client" ng-options="option.client_id as option.client_name for option in availableOptions"></select>
It's working fine. Showing all the default values selected but I need client_id in option values. like this:-
<select id="multiSelect" class="ng-pristine ng-valid form-control" multiselect="" multiple="" ng-model="simpli_client" ng-options="option.client_id as option.client_name for option in availableOptions"><option value="62024" selected="selected">Advantage Land Co</option><option value="59194">Alpha - Brookings, SD</option><option value="62413" selected="selected">B and B Auto</option></select>
I need values in the option fields (value="62024").
Here is a working fiddle : https://jsfiddle.net/xhph7qny/1/
You can use track by provided by angular ng-options.
HTML
<select id="multiSelect" class="ng-pristine ng-valid form-control" multiselect="" multiple="" ng-model="simpli_client" ng-options="option.client_id as option.client_name for option in availableOptions track by option.client_id"></select>
JS
$scope.simpli_client =[{"client_id":"62024","client_name":"Advantage Land Co"},{"client_id":"59194","client_name":"Alpha - Brookings, SD"}];
});
The only change is JS is that the ng-model should contain the entire objects rather than only client ids.
I've been dealing with this problem for a long time. I currently have a function called "add ()" that allows me to add items to an array that feeds a dropdown and text fields. Every time I add a new item to the array, I add it empty:
$scope.aAnimals.push({"animal": ""})
This causes a problem with the dropdown, since the value of "animal" is equal to ""
<Option style="display: none" value=""> Select an animal </option>
Then the item is not added. Both "animal" and the dropdown value of the first option are empty strings. If you add a value for "animal", other than "" here it would work and would be added to the dropdown.
What I can do? I want the generated text fields to be empty, and the dropdown adds the item.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals track by opt.animal">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' value={{item.animal}} class='animal' />
</div>
$scope.obj = {}
$scope.aAnimals=[{ "animal": "cat"},{ "animal": "dog"}]
$scope.add=function(){
$scope.aAnimals.push({ "animal": ""})
}
http://plnkr.co/edit/PRDp3a1bDJKtRmGR9GMY?p=preview
Let me verify what you need.
When the user click on the Add button, a new empty text box will be create in the page and a new empty option will be create in the drop down. When the user change the value in the text box, the drop down option will change.
In this case your need to modify the code like this.
<select class="form-control" ng-model='obj.animal' id='animal' name='animal'
ng-options="opt as opt.animal for opt in aAnimals">
<option style="display:none" value="">Select an animal</option>
</select>
<div ng-repeat='item in aAnimals'>
<input type='text' class='animal' ng-model='item.animal' />
</div>
I removed track by opt.animal like Pankas said, and added ng-model='item.animal', also don't need value={{item.animal}} since we use AngularJS 2-way binding.
Your code is working perfectly, just remove display none in option
<option value="">Select an animal</option>
I seen you are using jquery in Save functionality. We have jqlite in built in angular. Please check below code for save.
var length = $scope.aAnimals.length;
$scope.aAnimals[length-1].animal =
angular.element(document).find('.animal').eq(length-1).val();
Hu,
another question to angular.
I have an array:
items = [
{"id":1,"name":"AAA"},
{"id":2,"name":"BBB"},
{"id":3,"name":"CCC"},
{"id":4,"name":"DDD"}
]
and my ng-select that is combined with a label by
`{{ itemid }}
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items">
</select>
Now, when I select by the first time the first option is an "empty space" that I can not choose. But choosing an option makes the drop down closes. And when I click on my select again the last selected option is hightlighted.And I'd like to have the "empty space" as first option again.
Is it possible?
Ye that's possible by resetting your itemId with a combination of ng-click and ng-change e.g.:
<select type="text" class="form-control form-control-small"
ng-model="itemId" ng-options="item.id as item.name for item in items"
ng-click="reset()" ng-change="update()">
</select>
Use one to track when a change is made and only if a change is made and the element is clicked again reset itemId to 0
See this plnkr for an example: http://embed.plnkr.co/i0J0lCZwgnQ9YRoeKoHS/
You can specify a blank option in your HTML as an 'option' element nested within the select (from angular docs):
<select ng-model="myColor" ng-options="color.name for color in colors">
<option value="">-- choose color --</option>
</select>
Have problem with binding model to input and select in the same time. Input value changes when model selected from dropdown. But dropdown doesn't change if entered input value equal some of the values of list.
Example on Plunker
<select
ng-model="Choice.SelectedOption"
ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>
{{Choice.SelectedOption.ID}}
input model <input type="text" ng-model="Choice.SelectedOption">
input value {{ Choice.SelectedOption }}
Change model from dropdown, then try to change model from input to 1,2 or 3 (it's users ID's)
Changing <input type="text"> to <input type="number"> fixed it.
http://plnkr.co/edit/FQqVGZz51SCJunWPZwfd?p=preview