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.
Related
I have a dropdownlist with a list of countries (all countries)
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
I have the form in a modal that i want get country value from.
<input id="seachcountry" type="text" class="form-control" name="country">
I have written a JQuery line to get the value from the modal form to the page fields, everything works great but the country select fields are not changing the value.
$("#seachcountry").val($("#modalform").val()).trigger("change");
thank you for your suggestions!
This will work for you:
Just inject the value of the <input> to <select>.
I have created a snippet for you.
var Tval = $('#seachcountry').val();
$('#Country').val(Tval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Country" onchange="country();">
<option id="3">Japan</option>
<option id="4">Canada</option>
<option id="5">France</option>
<option id="6">Peru</option>
</select>
<input id="seachcountry" type="text" class="form-control" name="country" value="France">
Try this.
function country() {
$("#seachcountry").val($(this).val());
}
For changing value in any select you just need send exist value from this select. In your select options have only ids, but not have value attribute. So if you add value equal to id to change value in the your form to "France" need run following:
$("#selectId").val(5)
Instead of 5 you can obtain value from any other field or else.
If you want set your value to input field when changed in select, you need attach listener that will do all work. It will looks like this:
$("#selectId").on("change", function(){
$("#inputFieldId").val($(this).find(":selected").text());
})
This will set displayed value to select, to set real value just write instead $(this).find(":selected").text() this $(this).val()
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}}
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'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();
I am using bootstrapDualListbox
JS
$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({
moveOnSelect: false
});
HTML
<select multiple="multiple" size="10" name="duallistbox_demo1[]" ng-model="selectedStaff"><option ng-repeat="staff in staffs" value="{{staff.userId}}">{{staff.firstName}} {{staff.lastName}}</option>
</select>
If I use options as different values(not from ngRepeat) swapping is fine. If I use from ng-repeat, on selection all values are swapping rather selected. How I solve this?
Please check using ng-options with select instead of options with ng-repeat.
<select multiple="multiple" size="10" ng-options="staff as staff.firstName for staff in staffs track by staff.userId" name="duallistbox_demo1[]" ng-model="selectedStaff">