0

假设我有这样一个数组。

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

我想使用角度 ui-select 来形成下拉选择。由于第三个对象不包含“名称”，因此不应显示。

plunker：http ://plnkr.co/edit/jbFDnJZSsGHVnC7Ty0wK?p=preview

但是 ui-select 一直显示一个小的空白空间。想知道我怎么能克服这个。欣赏。

4

2 回答 2

1

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

Plunkr

索引.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>

应用程序.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;
  };
});
于 2015-07-16T13:01:53.587 回答
0

你试过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>
于 2015-07-16T10:47:23.200 回答