CODEWITHSUNDEEP
javascriptangularjsng-options
Patrick McDermott
Patrick McDermott

Reputation: 1220

Finding ngOption selected within ngRepeat

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:

enter image description here

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.

enter image description here

Question

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

Upvotes: 0

Views: 53

Answers (2)

georgeawg
georgeawg

Reputation: 48968

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)
};

Upvotes: 1

node943034835
node943034835

Reputation: 53

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;

Upvotes: 1

Related Questions