有几个问题与此问题非常相似,但我一直无法找到解决方案。
我有一个使用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/
希望这能帮助