將角度材質設計複選框綁定到控制器中的陣列

Question

我有一組材料設計複選框，我想將它們的值綁定到控制器中的數組。

爲了實現這一點，我使用了this SO answer中描述的第一種方法。雖然值正在被添加並從列表中刪除，但當我點擊它們時，這些框不再顯示爲「已檢查」。我的代碼在下面，我也在this codepen中重新創建了這個問題。

HTML我複選框

<md-checkbox 
    ng-repeat="site in websites" 
    value="{{site}}" 
    ng-checked="selection.indexOf(site) > -1" 
    ng-click="toggleSelection(site)"> 
    {{site}} 
</md-checkbox> 

的JavaScript控制器

$scope.websites = ['Facebook', 'Twitter', 'Amazon']; 
    $scope.selection = ['Facebook']; 
    $scope.toggleSelection = function toggleSelection(site) { 
    var idx = $scope.selection.indexOf(site); 

    // is currently selected 
    if (idx > -1) { 
     $scope.selection.splice(idx, 1); 
    } 

    // is newly selected 
    else { 
     $scope.selection.push(site); 
    } 
    }; 
}); 

Answer 1

嘗試改變這一點：

ng-checked="selection.indexOf(site) > -1" 

這樣：

ng-checked="{{selection.indexOf(site) > -1}}" 

爲我工作：http://codepen.io/anon/pen/xbNOmE