チェックボックスの異なるリストの「select all」チェックボックス

Question

私のページには3つのチェックボックスがあります。各リストには、「すべて選択」というチェックボックスがあります。私は、私はそれが私に望ましい結果をもたらすのチェックボックス

 $scope.selectAll = function(array) { 
      angular.forEach(array, function(item) { 
       item.Selected = $scope.model.selectedAll; 
      }); 
     }; 

HTML

<input type="checkbox" 
      ng-model="model.selectedAll" 
      ng-change="selectAll(categories)" > 

の特定のリストを選択するには、パラメータと同じ機能を使用しています理由です、複製線でコードを増やしたくないI特定の配列のすべてのチェックボックスを選択できます。 しかし、ここに問題があります。 $scope.model.selectedAllがすべてのリストに関連しており、1つのリストですべてを選択すると、すべてのリストで「すべて選択」チェックボックスがオンになっています。

私はこの問題をはっきりと理解していますが、解決方法はわかりません。私は各リストに対して3つの異なる変数を作成することを考えていましたが、配列が不明なため、パラメータを持つ関数を使用していますので、特定の変数を関連付けることができず、機能しません。

チェックボックスの特定のリストのコードを複製せずにこの問題を解決する方法はありますか？

ありがとうございます。

here is my plunker

Answer 1

あなたはこれをやった方法は、あなたは非常にしっかりとそれらを拘束したことを意味し、同じモデルに非関連のエンティティのセットをバインドします。明らかに目標はそれらを分離しておくことです。そのため、異なるモデルが必要です。そのためにはいくつかの方法があります。これはちょうどあなたのコードにすることです行うには全くユニークなモデル

一つの方法を使用して

、より一般的な少しとそうのように、それぞれのチェックボックスに関連付けられた一意の一連のモデル：

HTML

<input type="checkbox" 
     ng-model="model1.selectedAll" 
     ng-change="selectAll(categories1, model1.selectedAll"> 

JS

あなたが複数の変数を追跡したくない場合は

$scope.selectAll = function(array, value) { 
    angular.forEach(array, function(item) { 
    item.Selected = value; 
    }); 
}; 

、またベースモデル

を使用して、単一のベースにそれらをカプセル化することができます。このメソッドは、動的に作成された要素がある場合に便利です。

あなたは、あなたの選択機能は$スコープからの眺めと少ない情報からより多くの情報を取得していることに注意してくださいどのようなHTML

<input type="checkbox" 
     ng-model="modelSet[key].selectedAll" 
     ng-change="selectAll(categories, key)"> 

JS

$scope.selectAll = function(array, key) { 
    angular.forEach(array, function(item) { 
    item.Selected = $scope.modelSet[key].selectedAll; 
    }); 
}; 

。ユーティリティ関数を可能な限り多くのコンテキストで提供して、より確実に再利用できるようにしたいとします。