Question

有几个问题与此问题非常相似，但我无法提出解决方案。

我有一个使用angularJS的选择列表。我需要使用title属性，所以我有一个ng-repeat来创建选项，即使我使用ng-selected总是选择第一个选项，总会有一个空白选项。

即使我做出选择并且空白选项消失，如果我然后过滤掉所选值，则空白将重新出现。

我已经使用ng-option（不包括我需要的tittle属性）包含一个选择列表，并使用默认值来显示在过滤后显示空白。

我希望的行为是永远不会有一个空白选项（总是选择第一个选项就可以了），并且每个选项可能有一个指令用于特殊处理点击事件。

提前致谢！

                    <select size="3" ng-model="person.current">
                <option  ng-repeat="p in people | filter:person.SearchTerm"
                        ng-selected="$first"
                        value="{{p}}"
                        title="{{p.name}}">
                    {{p.name}}
                </option>
    </select>

Answer 1

我把你的小提琴分开（如果我可能那么生硬）：http://jsfiddle.net/XsFe8/2/

这有点修复了。虽然我还没有与过滤器一起正常工作。

无论如何，我在这里做的是使用person.id作为每个选项的值。

<select ng-model="person.current">
    <option ng-repeat="p in people | filter:person.SearchTerm" ng-selected="$first" value="{{p.id}}" title="{{p.name}}">
        {{p.name}}
    </option>
</select>

并在person.current模型上设置初始calue：

$scope.person.current = $scope.people[1].id;

但是，它仍然不是100％。当你过滤选择....时，我有点难以理解空格出现的原因。

可能使用或不使用的替代方法是使用类似ng-repeat="p in filterPeople()的内容并在filterPeople函数中过滤数组。但我不确定这是否会改变任何事情。

更新：我在上面测试了我的建议：http://jsfiddle.net/XsFe8/2/ 如果将所选对象设置为已过滤数组中的第一个对象，则它可以正常工作。每次创建新的过滤数组时都这样做：

$scope.filterPeople = function () {
    var array = filterFilter($scope.people, $scope.person.SearchTerm);
    $scope.person.current = array[0].id;
    return array;
};

当实际选择了另一个对象而不是select中可见的对象时，看起来事情会变得毛茸茸。这是可以理解的：）

Answer 2

你的实际问题是ngModel中的值引用了一个在选择中不存在的值。

解决方案是每当您更改选择选项时，还要检查person.current以确保它指向有效条目。

这也意味着您可能希望将过滤器移动到控制器中，并在示波器中设置选项（您可以在代码中使用$ filter服务来获取相同的行为，https://docs.angularjs.org/api/ng/filter/filter）。通过这种方式，您可以在控制器中检查person.current是否有效，如果没有，则将其设置为所需的选项（例如第一个）。

Answer 3

上面引用的毛茸茸是由于当所有项目被过滤掉时由于数组为空而被修复：

 if(array.length>0)
        $scope.person.current = array[0].id;

http://jsfiddle.net/b0z6vpr8/

希望这有帮助

过滤后删除空白选项ng-repeat和ng-options

3 个答案: