Angular-material 在 md-select multiple 中设置默认选项答案

【问题标题】：Angular-material set default options in md-select multipleAngular-material 在 md-select multiple 中设置默认选项
【发布时间】：2017-11-11 06:37:21
【问题描述】：

我试图关注这个tutorial，但我无法让它为multiple md-select 工作。事实上，我有一个多选用户列表，我希望默认选择 2 个用户。

有什么办法可以实现吗？

【问题讨论】：

请提供一个插件，以便我们更好地理解问题。
我希望能够最初选择多个选项，例如 Bob 和 Alice。
你能分享一下你正在使用的json对象吗？

标签： angularjs typescript angular-material

【解决方案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>

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

不行！！我在文档上读到我必须使用 ngModelOptions 因为要预先选择一个选项，该函数会验证列表中是否存在预先选择的项目。但是当我们使用模型作为数组对象时，对象之间的比较是错误的。