AngularJS & lt; select>使用ng-model和ng-options在元素删除时被破坏

AngularJS <select> with ng-model and ng-options gets broken on element delete

本文关键字：删除 元素 select lt 使用 AngularJS ng-model ng-options      更新时间：2023-09-26

我在v1.3.0-beta.3中有一个选择器:

<select 
ng-model='selectedPassport'
ng-change="selectPassport(selectedPassport)"
ng-options="passport.number for passport in passports"
required>
</select>

我有一个按钮与ng-click从护照数组中删除元素:

    // delete button handler
    $scope.deletePassport = function () {
      var delIdx = $scope.passports.indexOf($scope.selectedPassport);
      var idx = delIdx;
      if (idx > 0) {
        idx--;
      }
      $scope.passports.splice(delIdx,1);
      $scope.selectedPassport = $scope.passports[idx];
   };
   // if I don't do that, I wouldn't be able to use $selectedPassport in my code
   $scope.selectPassport = function (pass) { 
      $scope.selectedPassport = pass; 
   }

我想在删除当前护照后选择以前的护照。但我得到的是空护照。在DOM模型中，它对应于value="?"的选项，尽管ng-model指向ng-options中的有效元素。我该如何克服?

问题是$scope.selectedPassport将是一个对象，在这种情况下，indexOx在这个表达式

var delIdx = $scope.passports.indexOf($scope.selectedPassport);

将无法找到相应的数组索引。我认为你可以这样修改:

$scope.deletePassport = function() {
    var delIdx = -1;
    for (var i = 0; i < $scope.passports.length; i++) {
        if ($scope.passports[i].number === $scope.selectedPassport.number) {
            delIdx = i;
            break;
        }
    }
    if (delIdx > -1) {
        $scope.passports.splice(delIdx, 1);
        $scope.selectedPassport = $scope.passports[delIdx];
    }
};

概念证明:http://plnkr.co/edit/E1BAwS6JHGzQs4gMct7R?p=preview

我把你的例子变成了一个普朗克的例子，它似乎是有效的。你一定是忘记了什么，或者把删除按钮弄乱了?

http://plnkr.co/edit/Rs173vmhu1bBubvRS18j

这个元素中出现的ng-if=属性导致了这个问题。我没有把ng-if放入源示例中，因为我认为它与问题无关。每次调用deletePassport()时，angular会自动重新计算ng-if条件，并重新创建select元素，从而丢失选择。用ng-show代替ng-if解决

相关文章：