角度材料在 md 选择多个中设置默认选项

Question

我试图按照本教程进行操作，但我无法让它为multiple md-select工作。事实上，我有一个多选用户列表，我希望默认选择 2 个用户。

有什么解决方案可以实现这一目标吗？

Answer 1

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

.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>

代码笔：https://codepen.io/kuhnroyal/pen/VWeWaw

Answer 2

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

$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

Answer 3

控制器：

$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>