Question

说我有这样的数组。

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

我想使用angular ui-select来形成下拉选择。由于第三个对象不包含＆＃39; name＆＃39;，因此不应显示。

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

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

Answer 1

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

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

Answer 2

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

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

2 个答案: