我有一个销售项目列表,对于每个销售项目都有一个下拉框,您可以在其中从可用ID列表中选择要分配给销售项目。对于每个销售项目,选择必须是唯一的。如果从 saleItem1 下拉列表中选择了 2,则 2 在 saleItem2 的下拉列表中不可用。
从下拉列表中选择一个 ID 后,我需要将其从列表中删除并替换为旧 ID。 选择一个 ID 会触发 ng-change,从而正确更新列表。但是,标有 asterix 的行(从列表中删除所选 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>
AngularJS V1.4包含了对ng-options
指令的重大重构。现在选择默认选项,模型值为 null
。有关更多信息,请参阅 AngularJS 开发人员指南 - 迁移到 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>