根據數組選擇/取消選中複選框

我有一個選定的數組，它將保存所有選定的項目。所以當你改變一個複選框時，該項目會被添加或從該數組中刪除。問題是，如果其他事情改變了選中的數組，複選框不會更新。根據數組選擇/取消選中複選框

將自己選擇的狀態存儲在它自己不是一個選項，因爲在我的應用程序項目數組得到重新填充取決於url。所以選中的數組是一個全局數組，它包含了所有你選擇的項目。爲了給它一些上下文，我的應用程序是一個文件瀏覽器，你可以選擇不同目錄中的文件。

Plunker

http://plnkr.co/edit/h9t3caBzk7hyTYJysCay?p=preview

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

    $scope.selected = ['one']; 
    $scope.items = ['one', 'two', 'three']; 

    $scope.select = function (item, s) { 

    if (s) { 
     return $scope.selected.push(item); 
    } 

    $scope.selected.splice($scope.selected.indexOf(item.path), 1); 

    } 

}); 

app.controller('ItemCtrl', function ($scope) { 

    $scope.s = $scope.selected.some(function (i){ 
    return i === $scope.item; 
    }) 

})

的Html

<body ng-controller="MainCtrl"> 

    <button ng-click='selected.length = 0'>Clear selected</button> 

    <p ng-repeat='item in items' ng-controller='ItemCtrl'> 
    <input type='checkbox' ng-change='select(item, s)' ng-model='s' /> {{item}} 
    </p> 

    {{selected}} 

</body>

來源

2013-07-26 Pickels

我分叉和修改您的plunker一點：

http://plnkr.co/edit/usoaJN8O0BE0J1vIdSwB?p=preview

所以我所做的就是改變$scope.selected成一個對象，並結合每個複選框的ng-model它，每個項目的價值作爲關鍵（ng-model=selected[item]）。

我還添加了一個函數，它將遍歷$scope.selected並返回數組格式的所有選定項目，以匹配我所假設的所需最終輸出。

我對這種方法的推理一般來說，我喜歡讓ng-model做所有的工作來管理我需要的任何信息（在這種情況下是選擇與否）以及雙向數據綁定。我覺得這通常會產生更少的代碼以及更簡潔的代碼。

來源

2013-07-26 17:19:06

一種選擇是在'$ scope。$ watch'中包裝'$ scope.s'賦值。它有效，但我想知道是否有更好的解決方案。

$scope.$watch('selected.length', function() { 
    $scope.s = $scope.selected.some(function (i){ 
    return i === $scope.item; 
    }); 
});

來源

2013-07-26 14:21:37 Pickels

根據數組選擇/取消選中複選框

回答

相關問題