md-select multiple中的角度材質設置默認選項

Question

我試圖關注此tutorial，但我無法使其適用於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> 

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

Answer 2

控制器：

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