我正在使用角度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; }); };更多推荐
发布评论