Question

我有一个用来演示的here。

我在ng-options select中使用空白选项标记。

    <select ng-model="food.fruitOne"
        ng-options="fruit.id as fruit.name for fruit in fruits | filter: food.fruitTwo && {id: '!' + food.fruitTwo} | filter: food.fruitThree && {id: '!' + food.fruitThree}">
       <option value="">-</option>
    </select>

对于3种不同的ng型号，选择列表使用3次。奇怪的是，如果您从任何选项中进行选择，然后将该选择更改回空白选项，则所有3个选项都会切换到空白选项并选择所有废话。

有趣。在不使用过滤器的this插件中，选择不会这样做。显然，过滤器是罪魁祸首。为什么呢？

谢谢！

Answer 1

ng-options和option无法协同工作。

您只需要使用其中一个。 它们都不能在同一指令中协同工作。

添加某些特定值的最佳方法是将其包含在模型中。为此，您需要自定义过滤器。这就是我在项目中的表现。

将您的模型更改为：

$scope.fruits = [
    {id: 4, name: ' '},
    {id: 1, name: 'apple'},
    {id: 2, name: 'banana'},
    {id: 3, name: 'orange'}
  ];

Answer 2

这是ng-repeat中您的过滤器中的错误。

查看更新的plunker

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.food = {
    fruitOne: "",
    fruitTwo: "",
    fruitThree: ""
  };
  $scope.fruits = [{
    id: 1,
    name: 'apple'
  }, {
    id: 2,
    name: 'banana'
  }, {
    id: 3,
    name: 'orange'
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <label>Choice 1</label>
  <select ng-model="food.fruitOne" ng-options="fruit.id as fruit.name for fruit in fruits | filter:food.fruitTwo!=''?{id: '!' + food.fruitTwo}:{} | filter:food.fruitThree!=''? {id: '!' + food.fruitThree}:{}">
    <option value=""></option>
  </select>
  <label>Choice 2</label>
  <select ng-model="food.fruitTwo" ng-options="fruit.id as fruit.name for fruit in fruits | filter: food.fruitOne!=''?{id: '!' + food.fruitOne}:{} | filter: food.fruitThree!=''?{id: '!' + food.fruitThree}:{}">
    <option value=""></option>
  </select>
  <label>Choice 3</label>
  <select ng-model="food.fruitThree" ng-options="fruit.id as fruit.name for fruit in fruits | filter: food.fruitOne!=''?{id: '!' + food.fruitOne}:{} | filter: food.fruitTwo!=''?{id: '!' + food.fruitTwo}:{}">
    <option value=""></option>
  </select>
  <hr>
  <p>Choice 1 - {{ food.fruitOne }}</p>
  <p>Choice 2 - {{ food.fruitTwo }}</p>
  <p>Choice 3 - {{ food.fruitThree }}</p>
</body>

为什么ng-options中的空<option>清除所有选择？

2 个答案: