角度用户界面选择，忽略选择中的空项目
[英]Angular ui-select, ignore empty item in choices
问题描述
说我有这样一个数组。
$scope.countries = [
{name: 'a'},
{name: 'b'},
{notName:'xx'}
];
我想使用有角度的ui-select来形成下拉选择。 由于第三个对象不包含“名称”，因此不应显示它。
塞子： http ://plnkr.co/edit/jbFDnJZSsGHVnC7Ty0wK?p=preview
但是ui-select始终显示一个小的空白空间。 想知道我如何能克服这个问题。 欣赏。
2 个解决方案
解决方案1
1 已采纳 2015-07-16 13:01:53
尝试在搜索过滤器之前使用自定义过滤器，如下所示：
index.html
<body ng-controller="DemoCtrl">
<p>Selected: {{country.selected}}</p>
<ui-select ng-model="country.selected" theme="selectize" style="width: 300px;">
<ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in countries| removeBlanks | filter: $select.search ">
<span ng-bind-html="country.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
</body>
app.js
'use strict';
var app = angular.module('demo', ['ngSanitize', 'ui.select']);
app.controller('DemoCtrl', function($scope, $http) {
$scope.country = {};
$scope.countries = [
{name: 'a'},
{name: 'b'},
{notName:'xx'}
];
$scope.ignore = {notName:'xx'};
});
app.filter('removeBlanks', function() {
return function( items) {
var filtered = [];
angular.forEach(items, function(item) {
if(!item.hasOwnProperty('notName')){
filtered.push(item);
}
});
console.log('filtered', filtered);
return filtered;
};
});
解决方案2
0 2015-07-16 10:47:23
您尝试过ng-show吗？ 那可能行得通，我没有使用过ui-select ，但这通常对ng-repeat有用：
<ui-select-choices repeat="node.dataName as node in flattenData | filter: $select.search" ng-show="node.dataName">
<span ng-bind-html="node.dataName| highlight: $select.search"></span>
</ui-select-choices>
将项添加到ui-select Angular
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.