angularjsangular-ui-select

Not able to multiple select using angular ui-select for typeahead values


I am using angular ui-select for mulltiple selection.

<label>All Users</label>
<ui-select multiple ng-model="a.users" close-on-select="false">
    <ui-select-match placeholder="Select users">{{$item}}</ui-select-match>
    <ui-select-choices typeahead="val for val in getAllUsers($viewValue)" typeahead-loading="loadingCodes" typeahead-no-results="noResults"></ui-select-choices>
</ui-select>

The data inside the dropdown comes from an API.

My directive code:

scope.getAllUsers = function(key) {
  var obj = {
      "key": key
  }

  function extract(resp) {
      return resp.data.slice(0)
  }

  if (key.length >= 2) {
      return Promise.all([
        ApiServices.getPrimaryUsers(obj).then(extract),
        ApiServices.getSecondaryUsers(obj).then(extract)
      ])
      .then(function(results) {
          return [].concat.apply([], results) 
      });
  }
  else {
      return false;
  }
}

But I its not working for me. I am not getting any data in the dropdown. Not able to multiple select either. Can anyone help me with this?


Solution

  • Try this, it should work as you expected. In your view, add the following code.

    <label>All Users</label>
    <ui-select multiple ng-model="a.users" close-on-select="false">
        <ui-select-match placeholder="Select users">{{$item.name}}</ui-select-match>
        <ui-select-choices minimum-input-length="1" repeat="user in filteredUsers track by $index" refresh="refreshUsers($select.search)" refresh-delay="0">
            <div ng-bind-html="user.name | highlight: $select.search"></div>
        </ui-select-choices>
    </ui-select>
    <pre>{{a.users}}</pre>
    

    In your controller, add the following code. Instead of returning static array object with a Promise in getUsers(), you can return $http response which always acts as a Promise.

    $scope.a = {
       users: []
    };
    
    function getUsers(search) {
       var deferred = $q.defer();
       var users = [
            { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States' },
            { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina' },
            { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
            { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador' },
            { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador' },
            { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States' },
            { name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia' },
            { name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador' },
            { name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia' },
            { name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia' }
      ];
      $timeout(function() {
        deferred.resolve(users.filter(function(user) {
            return user.name.indexOf(search) > -1;
        }));
      }, 2000);
      return deferred.promise;
    }
    
    $scope.filteredUsers = [];
    $scope.refreshUsers = function(search) {
        getUsers(search).then(function(response) {
          $scope.filteredUsers = response;
        });
    };