Question

我尝试遵循此tutorial，但我无法使其适用于multiple md-select。事实上，我有一个多选用户列表，我希望默认选择2个用户。

有没有解决方案来实现这个目标？

Answer 1

<强>控制器：

$scope.users = [
    { id: 1, name: 'Bob' },
    { id: 2, name: 'Alice' },
    { id: 3, name: 'Steve' }
];

$scope.selectedUser =[
    { id: 1, name: 'Bob' },
    { id: 2, name: 'Alice' }
];

查看：

<md-select ng-model="selectedUser" ng-model-options="{trackBy: '$value.id'}" multiple> <md-option ng-value="user" ng-repeat="user in users">{{ user.name }} </md-option> </md-select>

Answer 2

您需要跟踪所有选定的用户而不是一个。如果需要，可以根据需要在阵列上删除/添加它们。

.controller('MyCtrl', function($scope) {
  $scope.users = [
    { id: 1, name: 'Bob' },
    { id: 2, name: 'Alice' },
    { id: 3, name: 'Steve' }
  ];

  $scope.selectedUsers = [];

  $scope.selectUser = function (id) {
    var user = $scope.users.filter(function(user) {
          return user.id == id;
      })[0];
    var idx = $scope.selectedUsers.indexOf(user);
    if (idx < 0) {
      $scope.selectedUsers.push(user);  
    } else {
      $scope.selectedUsers.splice(idx, 1);
    }
  }
 }

在视图中添加multiple并切换到selectedUsers。

<md-select ng-model="selectedUsers" multiple ng-model-options="{trackBy: '$value.id'}">
   <md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
</md-select>

Codepen：https://codepen.io/kuhnroyal/pen/VWeWaw

Answer 3

此代码定义所选对象的数组

$scope.selectedUsers = [];

您可以默认使用某些用户

进行设置

$scope.selectedUsers =[
  { id: 1, name: 'Bob' },
  { id: 2, name: 'Alice' }
];

这是因为ng-model设置为selectedUsers。如果您需要有关NG-MODEL行为的更多信息，请查看此处：https://docs.angularjs.org/api/ng/directive/ngModel

您还将在AngularJS中了解有关数据绑定的更多信息。

此外，您必须更新HTML以允许md-select具有多个选定值。

<md-select ng-model="selectedUsers" multiple></md-select>

您可以在https://material.angularjs.org/latest/api/directive/mdSelect

了解更多相关信息

Angular-material设置默认选项md-select multiple

3 个答案: