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

Remove blank option ng-repeat and ng-options after filter

本文关键字：ng 选项 过滤 repeat 空白 删除      更新时间：2023-09-26

有几个问题与此问题非常相似，但我一直无法找到解决方案。

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

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

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

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

提前感谢！

JS Fiddle：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>

我叉了你的小提琴（如果我这么直率的话）：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>

并在人员上设置初始calue。当前模型：

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

但它仍然不是100%。我有点困惑，为什么在筛选select时会出现空格。。。。

另一种可能有效也可能无效的方法是使用类似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;
};

当实际选择了除选择中可见对象之外的另一个对象时，看起来事情会变得棘手。这是可以理解的：）

实际问题是ngModel中的值引用的值在select中已不存在。

解决方案是，无论何时更改选择选项，都要检查person.current，以确保它指向有效的条目。

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

上面提到的hairyness是由于当所有项目都被过滤掉时有一个空数组，并且由修复

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

http://jsfiddle.net/b0z6vpr8/

希望这能帮助

相关文章：