CODEWITHSUNDEEP
angularjsangular-ui-select
shreya gupta
shreya gupta

Reputation: 141

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?

Upvotes: 0

Views: 876

Answers (1)

Abraham Gnanasingh
Abraham Gnanasingh

Reputation: 897

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: '[email protected]', age: 12, country: 'United States' },
        { name: 'Amalie', email: '[email protected]', age: 12, country: 'Argentina' },
        { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
        { name: 'Adrian', email: '[email protected]', age: 21, country: 'Ecuador' },
        { name: 'Wladimir', email: '[email protected]', age: 30, country: 'Ecuador' },
        { name: 'Samantha', email: '[email protected]', age: 30, country: 'United States' },
        { name: 'Nicole', email: '[email protected]', age: 43, country: 'Colombia' },
        { name: 'Natasha', email: '[email protected]', age: 54, country: 'Ecuador' },
        { name: 'Michael', email: '[email protected]', age: 15, country: 'Colombia' },
        { name: 'Nicolás', email: '[email protected]', 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;
    });
};

Upvotes: 2

Related Questions