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

Question

假设我有这样一个数组。

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

我想使用 angular ui-select 形成下拉菜单 select。由于第三个对象不包含 'name'，因此不应显示。

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

但是ui-select一直显示一个小空space。想知道我如何克服这个问题。欣赏。

Answer 1

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

Answer 2

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

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

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

Angular ui-select, ignore empty item in choices

javascript

angularjs

angular-ui

ui-select