无法使用角度ui

无法使用角度ui-select进行多次选择，以获得预先输入的值(Not able to multiple select using angular ui-select for typeahead values)

我正在使用角度ui-select进行多重选择。

<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>

下拉列表中的数据来自API。

我的指令代码：

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

但我不适合我。 我没有在下拉列表中获得任何数据。 无法多次选择。 谁能帮我这个？

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?

最满意答案

试试这个，它应该按照你的预期工作。 在您的视图中，添加以下代码。

<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>

在控制器中，添加以下代码。 而不是在getUsers()使用Promise返回静态数组对象，您可以返回$http响应，它始终充当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; }, 2000); };

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