【问题标题】: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 具有多个选定值。

    &lt;md-select ng-model="selectedUsers" multiple&gt;&lt;/md-select&gt;

    您将在此处了解更多信息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 因为要预先选择一个选项,该函数会验证列表中是否存在预先选择的项目。但是当我们使用模型作为数组对象时,对象之间的比较是错误的。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-06-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-16
      • 1970-01-01
      相关资源
      最近更新 更多