时间戳

首页 > 解决方案 > 查找在 ngRepeat 中选择的 ngOption

javascript - 查找在 ngRepeat 中选择的 ngOption

问题描述

我有一个用指令填充的表ngRepeat，并且在每个项目中都是ngOptions. 在更改时，我调用transactionListFilter控制器中的函数以找出发生了哪些select更改，因此我可以将所有其他设置重置select为默认值“Multiple”。

看法

<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>

控制器

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

所以它应该是这样的：

在此处输入图像描述

但是，如果我选择第二个select，则第一个选择 stll 将填充一个应用程序编号，而不是重置为“多个”。当我提交ngModel值时，它会提交数据表单ngOptions。

在此处输入图像描述

问题

如何识别select从控制器中选择的选项，以便我可以将所有其他select值重置为“多个”？

标签： javascriptangularjsng-options

解决方案

我相信您可以在指令中使用 $index 。我已经成功地在 ng-repeat 和表单中使用它。这是一篇相关文章。

 <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

在您的情况下，它可能是这样的：

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

推荐阅读