eagleEye eagleEye - 19 days ago 7
AngularJS Question

Drop down value replicates in nog options Angular

I have a dynamically generated html table that adds rows based on the record that is displayed. I'm adding a column that will contain a dropdown. I used ng-options for it, however every time I change one record, the rest are also updated. Tried changing it to ng-repeat and get the same result. See code below:

<td>

<select class="form-control" ng-model="$ctrl.selectedRC" ng- options="r.ccd as (r.OName + ' -- '+ r.RCName) for r in $ctrl.RC track by r.ccd"> </select>
<!--if I have 5 records, all dropdowns in the table change -->
</td>


Using ng-repeat:

<select class="form-control" ng-model="$ctrl.selectedRC" <option value="" ng-selected="true">--Select one--</option>
<option ng-repeat="r in $ctrl.RC"
value="{{r.OName}}"
ng-selected="{{r.OName === selectedRC}}">{{r.RCName}}
</option>

</select>


I know that these two are currently displaying two different things (one a concatenated set of values, the other juts one). But my main interest is to figure out how to have each have its own dropdown without affecting the rest of the rows. Thank you!

Answer

Simply because you use the same ng-model for all rows.

You need to define a different one for each row.

You do this:

ng-model="$ctrl.selectedRC"

but you need something like this:

ng-model="$ctrl.selectedRC[$index]"

where $index is your reference to the row.

Comments