1

我在 AngularJS 中的过滤器有问题。我使用过滤器来显示基于搜索框输入的选项。一切正常，但每次我搜索（除了默认选项（设置为ng-model））它都会在结果中添加一个空选项。

我ng-model 为<select>标签设置

这是我的代码

<div class="choosePatternHeader">
    <span>Pattern name</span>
    <input ng-model="obj.name" type="text">

</div>
<div class="select_div">
    <select  size="4"  ng-model="pattern" ng-options="p.name  for p in patterns | filter:obj">
    </select>
</div>

这是我搜索“模式 4”时的结果

<select class="ng-pristine ng-valid" ng-options="p.name for p in patterns | filter:obj"    ng-model="pattern" size="4">
<option value="?" selected="selected"></option>
<option value="0">pattern 4</option>
</select>

当我搜索“模式 1”时的结果（默认选项）

 <select class="ng-pristine ng-valid" ng-options="p.name for p in patterns | filter:obj"    ng-model="pattern" size="4">
<option value="0">pattern 1</option>
</select>

这是一个jsFiddle

4

3 回答 3

1

我解决如下

function MyController($scope, $filter)
{
    $scope.patterns=[{name:'pattern 1'},{name:'pattern 2'},{name:'pattern 3'},{name:'pattern 4'}];
    $scope.pattern=$scope.patterns[0];

    $scope.$watch('obj.name', function(value){
          var filtered_devices = $filter('filter')($scope.patterns, {name:$scope.obj.name});         
          if (filtered_devices) {
              $scope.pattern = filtered_devices[0];
          }
    }, true);
}
于 2013-11-23T03:45:50.377 回答
1

也会发生同样的情况<option ng-repeat="p in patterns">，所以我想这是根本问题。

我发现的唯一“解决方案”是通过定义一个空选项来简单地使用空值，例如<option value="">Please select</option>.

于 2013-08-01T11:43:22.590 回答
0

如果ng-model设置为不在ng-options. 我不知道当过滤器不返回任何值时（当ng-options为空时，ng-model永远不能在其中）时防止这种情况发生的方法，但是当它返回时，您可以设置ng-model为第一项，这意味着虚拟选项将不会被创建。您可以使用ng-change或类似方法来执行此操作。

于 2013-08-01T09:04:26.933 回答