無法使用角度ui-select對typeahead值進行多重選擇

Question

我正在使用角度ui-選擇來進行多重選擇。

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

但我它不是爲我工作。我在下拉菜單中沒有收到任何數據。無法多選兩者。誰能幫我這個？

Answer 1

試試這個，它應該按照你的預期工作。在你看來，添加下面的代碼。

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