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