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

【问题标题】：Remove blank option ng-repeat and ng-options after filter过滤后删除空白选项 ng-repeat 和 ng-options
【发布时间】：2014-04-25 16:36:39
【问题描述】：

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

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

即使我做出选择并且空白选项消失了，如果我随后过滤掉所选值，空白也会重新出现。

我已经包含了一个使用 ng-option 的选择列表（其中不包含我需要的 title 属性）和一个默认值，以显示过滤后将出现空白。

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

提前致谢！

JS 小提琴：http://jsfiddle.net/32DFM/3/

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

【问题讨论】：

标签： javascript angularjs

【解决方案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 模型上设置初始值：

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

当实际选择了与选择中可见的对象不同的对象时，看起来事情变得很棘手。这是可以理解的:)

【讨论】：

【解决方案2】：

您的实际问题是 ngModel 中的值正在引用选择中不再存在的值。

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

这也意味着您可能希望将过滤器移动到控制器中，并在范围内设置选项（您可以在代码中使用 $filter 服务来获得相同的行为，https://docs.angularjs.org/api/ng/filter/filter）。这样你就可以在你的控制器中有一个函数来检查 person.current 是否有效，如果不是，将它设置为所需的选项（例如第一个）。

【讨论】：

【解决方案3】：

上面提到的毛茸茸的原因是当所有项目都被过滤掉并通过以下方式修复时是一个空数组：

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

http://jsfiddle.net/b0z6vpr8/

希望对你有帮助

【讨论】：