当从 ng-options 中删除所选选项时，第二次触发 ng-change - AngularJS 1.7

Question

我有一个促销商品列表，每个促销商品都有一个下拉框，您可以从可用 ID 列表中 select 分配给促销商品。 selection 对于每个销售项目必须是唯一的。如果 2 是 select 从 saleItem1 下拉列表中编辑的，则 2 在 saleItem2 的下拉列表中不可用。

select从下拉列表中输入一个 ID 后，我需要将其从列表中删除并用旧 ID 替换。选择一个 ID 会触发正确更新列表的 ng-change。然而，标有星号的行从列表中删除了 selected ID，导致 ng-change 再次被触发并使用空值作为新 ID。

我正在努力寻找解决此问题的方法。

相同的代码在 AngularJS 1.2 中工作正常，但在移动到 1.7 后我看到了这个问题。

$scope.updateSaleItemIds = function(saleItem, newid) {
    var ind = $scope.availableSaleItemIds.indexOf(newid);
    if (!isNaN(saleItem.id)) {
        *$scope.availableSaleItemIds[ind] = saleItem.id;*
    }
    else {
        $scope.availableSaleItemIds.splice(ind,1);
    }
    $scope.availableSaleItemIds.sort(function(a, b){return a - b});
    var indE = $scope.saleItems.indexOf(saleItem);
    $scope.saleItems[indE].id = newid;
};

HTML

<tr ng-repeat="saleItem in saleItems" class="createForm">
    <select ng-model="selectedId"
        ng-options="id for id in availableSaleItemIds"
        ng-change="updateSaleItemIds(saleItem, selectedId)">
        <option value="">{{saleItem.id}}</option>
    </select>
</tr>

Answer 1

AngularJS V1.4 包括对 ng-options 指令的主要重构。现在选择默认选项，模型值为 null。有关详细信息，请参阅 AngularJS Developer Guide - Migrating to V1.4 - ngOptions。

当用户选择一个选项时，模型将设置为该新值，并且 ng-change 会更新可用选项。 updateSaleItemsIds 函数从 availableSaleItemIds 列表中删除该值。当新的选项列表不包括模型值时，ng-options 指令将模型设置回 null 并再次调用 ng-change 指令。

解决方法是当所选值更改为 null 时不更新选项列表。

<select ng-model="selectedId"
    ng-options="id for id in availableSaleItemIds"
    ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶u̶p̶d̶a̶t̶e̶S̶a̶l̶e̶I̶t̶e̶m̶I̶d̶s̶(̶s̶a̶l̶e̶I̶t̶e̶m̶,̶ ̶s̶e̶l̶e̶c̶t̶e̶d̶I̶d̶)̶"̶
    ng-change="selectedId && updateSaleItemIds(saleItem, selectedId)">
    <option value="">{{saleItem.id}}</option>
</select>

当从 ng-options 中删除所选选项时，第二次触发 ng-change - AngularJS 1.7

ng-change is fired a second time when selected option is removed from ng-options - AngularJS 1.7

javascript

angularjs

ng-options

angularjs-1.6