2017-07-10 5 views
0

私は多重選択に角度ui-selectを使用しています。先読み値に角度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; 
    } 
} 

しかし、私はその私のために働いていません。ドロップダウンにデータが表示されません。複数選択することもできません。誰もこれで私を助けることができますか?

+0

誰でも私に何か回答や提案を送ってください –

答えて

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> 

コントローラに次のコードを追加します。 Promiseのstatic配列オブジェクトをgetUsers()に戻す代わりに、Promiseとして常に動作する$http応答を返すことができます。

$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; 
    }, 2000); 
}; 
関連する問題