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-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中的有效elemnt。我怎么能克服这个？

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示例，它似乎正在起作用。您一定忘记了某些内容或搞砸了删除按钮？

http://plnkr.co/edit/Rs173vmhu1bBubvRS18j

Answer 3

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

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

3 个答案: