This question already has answers here:
How to set a selected option of a dropdown list control using angular JS
(9 answers)
Closed 7 years ago.
Here is the problem, I create table with ng-repeat, in table td I have select with option, I need to set selected option.
<tr id="edit" ng-repeat="x in products">
<td style="width: 2%;display: none;">{{x.id}}</td>
<td style="width: 16%"><h6 style="font-weight: normal;" ng-bind="nameResult" ng-hide="false"></h6>
<select style="margin: -16px 0 0 0;" class="span12" style="margin: 0;" ng-change="loadProductData(x)" id="product_list" ng-options="prod.product_name as prod.product_name for prod in items track by prod.product_id" ng-model="selectedOption">
<option value="">Select product</option>
<option label="Registracija korisni" value="57">Registracija korisni</option>
<option selected="selected" label="Testing of platform" value="58">Testing of platform</option>
<option label="Test 2" value="63">Test 2</option>
<option label="irfam" value="87">irfam</option>
<option label="ddd" value="88">ddd</option>
</select>
</td>
<tr>
So I have multiple select with same ng-model how to set selected different option for each select.
Since your ng-model="selectedOption" then angular will select the option which matches selectedOption. Since you are tracking by prod.product_id then selectedOption will need to be set to a prod.product_id.
I see you have set some options manually. If these are not being selected properly you may need to add these items to your prod object, then let angular create the options for you.
Related
I have table with ng-repeat values which I fetch from mysql(Codeigniter).
and this table has checkbox which I select to create a JSON.
<tr ng-repeat="subject in subject_list | orderBy: 'sub_branch' | filter: search_subject">
<td><input type="checkbox"
ng-true-value="{{subject.sub_id}}"
ng-model="checkmodel.subject.sub_id"
ng-true-value="subject.sub_id"
ng-name="subject_name"></td>
<td>{{subject.sub_name}}</td>
<td>{{subject.sub_branch}}</td>
<td>{{subject.sub_code}}</td>
<td>{{subject.sub_sem}}</td>
<td><select ng-model="checkmodel.subject.section" ng-disabled="!checkmodel.subject.sub_id">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select></td>
</tr>
Problem 1: I'm only able to select one checkbox.
Problem 2: When I select a value from dropdown, the same value automatically selected in other dropdown boxes.
Here is sample JSON: {"subject":{"sub_id":1,"section":"A"}}
For both of the problem, I would suggest you inspect the elements to make sure that the ng-model is not same. You have to have different models for every checkbox as well as select menu.
I dug a few hours without finding an answer to what i want to do. I'm working on a complicate form with a lot of variables, so i'll try to narrow my request here :)
var list = [{id:0, name:opt0}, {id:1, name:opt1},{id:2, name:opt2}];
var selected = ['opt1', 'opt2'];
var numberOfRows = 2;
I got a variable number of select based on a variable. So i use ng-repeat like this :
<tr ng-repeat="i in numberOfRows track by $index">
<td>
<select list.indexOf(selected[$index]) as item for item in list></select>
</td>
</tr>
the result should be like this
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
<option label="opt2" value="opt2"></option>
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1"></option>
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
I tried many way to write my ng-option.
what i have actually is the correct number of select with the list inside each of them, but each select should have a different pre selected variable. And they all are selected on the last value of my list. No matter what i try.
ps: the values in my array 'selected' are always in the list[$index].name
If someone knows how to achieve that i will be very happy ^^
....
little side request : Is it possible to do a filter on the list which will remove/hide the selected option trough all the selects?
result like this :
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
<option label="opt1" value="opt1" selected="selected"></option>
//opt2 removed because it's selected in another select
</select>
</tr></td>
<tr><td>
<select>
<option label="opt0" value="opt0"></option>
//opt1 removed because it's selected in the previous select
<option label="opt2" value="opt2" selected="selected"></option>
</select>
</tr></td>
thanks :)
I tried your existing solution on the first part, but i don't know how you manage to make this line of code work:
<tr ng-repeat="i in numberOfRows track by $index">
So i did my own version just basing on your desired output, using $scope.selected as the ng-model array, as you can see i am mutating your $scope.selected to have a value of [{id:1, name:'opt1'},{id:2, name:'opt2'}] which are the complete object preselected value of ['opt1', 'opt2'].
$scope.list = [{id:0, name:'opt0'}, {id:1, name:'opt1'},{id:2, name:'opt2'}];
$scope.selected = ['opt1', 'opt2'];
$scope.selectModels = [];
var newSelected = [];
angular.forEach($scope.selected, function(value, key) {
this.push($filter("filter")($scope.list, {name: value})[0]);
}, newSelected);
$scope.selectModels = newSelected;
And you markup:
<tr ng-repeat="i in selected">
<td>
<select ng-model="selectModels[$index]" ng-options="option.name for option in list track by option.id" class="form-control"></select>
{{ selectModels[$index] }}
</td>
</tr>
I think your side question is possible if you generate a different list for each row, or use options-disabled for that row.
Here is working jsfiddle hope this helps. You can set a new question of your side request.
I have select option in HTML and I don't know how to put previosly selected value after reload.
<select ng-init="city_id = city_id" name="region" id="region" ng-model="city_id" >
<option value="-1" selected="selected">Select area</option>
<option ng-repeat="city in cities" value="{{city.id}}" ng-class="{ 'bold' : city.capital == 1 }">{{ city.name }}</option>
</select>
I used controller and created $scope.city_id and it has a value. But select still has default value.
Select area item is necessary for me because i can't modify json data to add this optio in cotroller.
Solution:
<option ng-selected="city_id == city.id" ng-repeat="city in cities" ...
Use ng-selected for select option
If the problem is that the controller is destroyed you may want store it in a value, I.e. angular.module ('myApp').value ('name',value)
I'm using select2 tool in my project using angularjs.
While assigning value to this select2 in a grid using angularjs in first row,
it is not assigning, but if I'm trying to assign in next to first row that is from 2nd row to next, it is working fine.
Why it is happening.?
Any suggestions regarding this is welcome.
Thanks in advance.
<td ng-if="configRow.validation.valueType == 'Single Choice'" style="width:26%">
<!-- <input style="width:100%" type="text" ng-model="configRow.Value" ui-select2="selectChoices" ng-blur="addToConfig()"> -->
<div class="print-blank" >
<select ui-select2 ng-model="configRow.Value" data-placeholder="Select One" ng-change="updatedDate($index)">
<option value=""></option>
<option ng-repeat="element in configRow.validation.list track by $index" value="{{element}}" >{{element}}</option>
</select>
</div>
</td>
I have the following object:
[
{"id":"150c67d4-952b-45b0-b287-f651a5f6d82b","name":"xx"},
{"id":"9001f011-3a0c-4d45-a0fb-eabb4c83ff83","name":"yy"},
{"id":"9b8b93af-cfef-451a-8dda-7373d9154f60","name":"zz"}
]
Here's my HTML:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus">
<option style="display: none" value="">Select User</option>
</select>
The result is:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus"
><option style="display: none" value="" class="">Select User</option>
<option value="0" selected="selected">*</option>
<option value="1">xx</option>
<option value="2">yy</option>
<option value="3">zz</option></select>
How can I make this so that the values stored are the actual id's ?
When you are using the ng-option to generate the option list, you don't have control over the values generated for options. For an array it is the index into the array.
If you want to have specific value in the option field, you have to use ng-repeat for it.
In any case, you should not be very concern about specific of html generated, angular can update model correctly in any case.