Question

我在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

Answer 1

<option ng-repeat="p in patterns">也是如此，所以我猜这是潜在的问题。

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

Answer 2

我解决了如下

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);
}

Answer 3

如果将ng-model设置为不在ng-options中的值，AngularJS确实会添加一个虚拟选项。当过滤器没有返回任何值时（ng-options为空，ng-model永远不会在其中），我不知道有什么方法可以阻止这种情况，但是当它出现时，你可以设置{ {1}}到第一个项目，这意味着将不会创建虚拟选项。您可以使用ng-model或类似内容来执行此操作。

使用过滤器搜索在选项中在angularJS中添加一个空选项

3 个答案: