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