在angularjs下拉菜單multiselect中刪除ng-repeat選定項目onItemSelect事件之一

Question

我在表單上使用AngularJS Dropdown Multiselect 。 如果滿足條件，則在onItemSelect事件上刪除selectedItem的最快方法是什么？

<tr ng-repeat="detail in mainCtrl.lineDetails">
    <td>
        <div ng-dropdown-multiselect="true" options="mainCtrl.Options" 
             selected-model="detail.SelectedOptions"
             extra-settings="{
               searchField: 'name',
               enableSearch: true,
               displayProp: 'name',
               scrollableHeight: '300px',
               scrollable: true,
               keyboardControls: true,
               idProperty: 'id',
               buttonClasses: 'form-control drpdwn-btn',
               styleActive: true,
               selectionLimit:detail.SelectedLimit}"
             events="{ onItemSelect: mainCtrl.checkSelected,
                       onSelectAll: mainCtrl.checkSelectedAll }">
        </div>
    </td>
</tr>

目前，我只是經歷了整個mainCtrl.lineDetails然后detail.SelectedOptions然后檢查相同的ID每個項目，然后檢查其是否符合然后我的狀態在陣列中移除。

Answer 1

您可以在ng-repeat上跟蹤索引，然后在Item Select上傳遞索引並從mainCtrl.lineDetails數組拼接元素。

例：

<tr ng-repeat="(index, detail) in mainCtrl.lineDetails">
    <td>
    <div ng-dropdown-multiselect="true" options="mainCtrl.Options" 
         selected-model="detail.SelectedOptions"
         extra-settings="{
           searchField: 'name',
           enableSearch: true,
           displayProp: 'name',
           scrollableHeight: '300px',
           scrollable: true,
           keyboardControls: true,
           idProperty: 'id',
           buttonClasses: 'form-control drpdwn-btn',
           styleActive: true,
           selectionLimit:detail.SelectedLimit}"
         events="{ onItemSelect: removeLineDetailItem,
                   onSelectAll: mainCtrl.checkSelectedAll }">
    </div>
</td>


// Make a function on your ctrl which will be fired onItemSelect event
$scope.removeLineDetailItem(item) {
   const index = $scope.lineDetails.findIndex(val => val == item);
   $scope.lineDetails.splice(index, 1)
}