无法使用 angular ui-select 对预输入值进行多重 select

Question

我正在使用 angular ui-select 用于多个 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>

下拉列表中的数据来自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;
  }
}

但我不适合我。我没有在下拉列表中获得任何数据。也不能多个 select。谁能帮我解决这个问题？

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>

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

无法使用 angular ui-select 对预输入值进行多重 select

Not able to multiple select using angular ui-select for typeahead values

angularjs

angular-ui-select