AngularJS <select> ng-model和ng-options的元素在元素删除时被破坏

Question

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

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

我有一个用ng键单击的按钮，以从护照数组中删除元素：

    // 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模型中，虽然ng-model指向ng-options中的有效元素，但它对应于具有value =“？”的选项。 我该如何克服？

Answer 1

问题是$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

Answer 2

我将您的示例制作为一个Plunker示例，它似乎正在工作。 您一定忘记了某些东西或弄乱了Delete按钮？

http://plnkr.co/edit/Rs173vmhu1bBubvRS18j

Answer 3

该问题是由此元素中显示的ng-if =属性引起的。 我没有将ng-if放在源示例中，因为我认为这与问题无关。 每次调用deletePassport（）时，Ang-if条件都会由angular自动重新计算，并且select元素会重新创建，从而丢失选择。 通过将ng-if替换为ng-show来解决。