Angular ui-select，忽略选项中的空项

假设我有这样一个数组。

$scope.countries = [
    {name: 'a'},
    {name: 'b'},
    {notName:'xx'}
 ];

我想使用angular ui-select来形成一个下拉选择。因为第三个对象不包含'name'，所以不应该显示。

砰砰作响:http://plnkr.co/edit/jbFDnJZSsGHVnC7Ty0wK?p=preview

但是ui-select一直显示一个小的空白区域。不知道我怎么才能克服这一点。赞赏。

尝试在搜索过滤器之前使用自定义过滤器，如下所示:

Plunkr

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

您试过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>

相关内容

最新更新

热门标签：