从ng-options中删除所选选项后,第二次触发ng-change-AngularJS 1.7

时间:2018-12-28 20:23:29

标签: javascript angularjs ng-options angularjs-1.6

我有一个销售商品列表,每个销售商品都有一个下拉框,您可以在其中从可用ID列表中进行选择,以分配给该销售商品。每个销售项目的选择必须唯一。如果从saleItem1下拉列表中选择了2,则在saleItem2的下拉列表中将无法使用2。

从下拉列表中选择一个ID后,我需要将其从列表中删除,然后将其替换为旧ID。选择一个ID会触发ng-change,它会正确更新列表。但是,标有星号的行会从列表中删除选定的ID,这会导致以空值作为新ID再次触发ng-change。

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

相同的代码在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>

1 个答案:

答案 0 :(得分:0)

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>