Finding ngOption selected within ngRepeat

Question

I have a table which is populated with directive ngRepeat, and within each item is ngOptions. On change I call function transactionListFilter in the controller to find out which select has changed, so I can then reset all other select to default value 'Multiple'.

View

<tr data-ng-repeat="item in $ctrl.tableData">
    <td>
        <select 
         data-ng-options="item.appAndType for item in item.serviceUIs" 
         data-ng-model="selectedItem" 
         data-ng-change="$ctrl.transactionListFilter(selectedItem)" >
         <option value="">Multiple</option>
        </select>
    </td>                                    
</tr>

Controller

function transactionListFilter(data) {
    console.log(data)
    $scope.filter = data;
};

So it should look like this:

But if I select the second select, the first select stll is populated with an application number, rather than resetting to 'Multiple'. When I submit ngModel value, it submits the data form the ngOptions.

Question

How do I identify the selected select from the controller, so I can reset all other select value to 'Multiple'?

New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the [data hiding] problem often shows up when these directives are involved. See [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). — georgeawg, Dec 18 '19 at 16:48

georgeawg · Accepted Answer · 2020-01-02T11:39:59.860

One approach is to make the selection a property of the ng-repeat iterator:

<tr data-ng-repeat="item in $ctrl.tableData">
    <td>
        <select data-ng-options="ui.appAndType for ui in item.serviceUIs" 
                data-ng-model="item.selectedUi" 
                data-ng-change="$ctrl.transactionListFilter(item,$index)" >
           <option value="">Multiple</option>
        </select>
    </td>                                    
</tr>

function transactionListFilter(item, index) {
    $ctrl.tableData.forEach( (_ , idx) => {
         if (index != idx) {
             _.selectedUi = null;
         };
    });  
    console.log(item.selectedUi, index)
};

score 1 · Answer 2 · answered Dec 20 '19 at 00:47

I believe you can use $index in the directive. I've had success with using it in ng-repeat with forms. Here is a related article.

 <form name="formName" class="form-horizontal">
   <tr ng-repeat="notify in $ctrl.Channel.notify">
    <td>{{notify.severity}}</td>
    <td><input type="Text" name="name{{$index}}" ng-model="notify.name" ng-maxlength="16">
      <div ng-show="formName['name' + $index].$dirty" ng-messages="formName['name' + $index].$error" style="color:maroon" role="alert">
        <div ng-messages-include src="formNameErrorMessages"> </div>
     </div>
    </td>
   </tr>
 </form

In your case it might be something like this:

<tr data-ng-repeat="item in $ctrl.tableData">
  <td>
    <select  name="select{{$index}}"
     data-ng-options="item.appAndType for item in item.serviceUIs" 
     data-ng-model="selectedItem" 
     data-ng-change="$ctrl.transactionListFilter(selectedItem)" >
     <option value="">Multiple</option>
    </select>
  </td>

$scope.formName['select' + $index].$dirty;

Finding ngOption selected within ngRepeat

2 Answers2