0

Say I have such an array.

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

I want to use angular ui-select to form a dropdown select. Since the third object doesn't contain 'name', it should not be shown.

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

But ui-select keeps showing a small empty space. Wonder how I can overcome this. Appreciates.

user2922475
  • 63
  • 9
  • Not used ui-select before but from playing about with demo it looks like you just have to fill in the placeholder field. Have you tried that? It would be good if you could provide a demo on plunker or jsfiddle. – Matt Herbstritt Jul 16 '15 at 10:53
  • @MattHerbstritt Hi, sorry my previous question is a bit misleading, I just updated with plunker. – user2922475 Jul 16 '15 at 12:31

2 Answers2

1

Try using a custom filter before the search filter like this:

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;
  };
});
Matt Herbstritt
  • 4,754
  • 4
  • 25
  • 31
0

Have you tried ng-show? That might work, I haven't used ui-select, but this usually works for me with 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>
Starscream1984
  • 3,072
  • 1
  • 19
  • 27