複数のチェックボックスが選択されています。

Question

私は製品リストと学生リストを持っています。 表示する製品JSONがあります。その製品のJSON学生のために、私は別のJSON内：

[{"CustId":7191,"CFirstName":"Kynan"},{"CustId":29689,"CFirstName":"Pete"},{"CustId":29690,"CFirstName":"Gina"},{"CustId":29692,"CFirstName":"Jo"}] 

私は、各学生のために、各製品のチェックボックスを追加したいです。私は2つの問題を抱えている

$scope.selection = []; 
$scope.toggleSelection = function toggleSelection(customerName) { 
    var idx = $scope.selection.indexOf(customerName); 

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

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

：

<span ng-repeat="customer in productVM.product.Customers"> 
         <label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '> 
          <input class="options" ng-model="customer.CustId" type='checkbox' name="selectedStudent[]" 
            value="{{customer.CustId}}" ng-checked="selection.indexOf(customer.CFirstName) > -1" ng-click="toggleSelection(customer.CFirstName)"> 
          {{customer.CFirstName}} 
         </label> 
        </span> 

角度コード：ここで

iは、各製品のためにやっていることである 1.私は、製品のいずれかのチェックボックスをクリックするたびに、すべての製品の同様のチェックボックスがチェックされます（チェックを外すと同様です）。 2.選択したチェックボックスの値をどのように取得できますか。

Answer 1

これが私の仕事：

<label class="checkbox-inline" style='margin-left:0px !important; margin-right: 10px !important; '> 
          <input class="options" ng-model="selection[productVM.product.Id].customers[customer.CustId]" type='checkbox' name="selectedStudent[]" 
            value="{{customer.CustId}}"> 
          {{customer.CFirstName}} 
         </label> 

出典：

http://stackoverflow.com/questions/27148320/how-to-use-checkbox-with-nested-ng-repeat-in-angularjs 

そして http://jsfiddle.net/0x4396pu/1/

Answer 2

1. input要素に一意のid属性を定義する必要があります。

2. ng-modelhttps://docs.angularjs.org/api/ng/directive/ngModel - デフォルトでチェックボックスを使用する場合、値は必要ありません。顧客オブジェクト（customer.checkedなど）に新しいフィールドを定義し、それをng-modelディレクティブにバインドします。

   <span ng-repeat="customer in productVM.product.Customers"> 
       <label for="{{customer.CustId}}" class="checkbox-inline" style="margin-left:0px !important; margin-right: 10px !important;"> 
        <input id="{{customer.CustId}}" class="options" ng-model="customer.checked" type="checkbox" name="customerCheck" ng-click="toggleSelection($index)"/> 
        {{customer.CFirstName}} 
       </label> 
   </span>