web-dev-qa-db-ja.com

Angular選択したチェックボックスを取得

角度を使用して動的に入力されるチェックボックスのリストがあります。

 <div ng-repeat="X in XList">
     <label>{{X.Header}}</label>
     <input type="checkbox" name="X" value="{{X.Item.Id}}" />
     <p>{{X.Header}}</p>
 </div>

選択したすべてのチェックボックスのリストを取得するメソッドが必要です。通常私は使用します

 $('input[name=checkboxlist]:checked').each(function()
{
}

しかし、これはangular ...では許容できません。それで、適切な方法はありますか？

javascriptangularjscheckboxcheckboxlist
16
Sana Joseph

ここに実装されています plunker

 <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}

 $scope.ShowSelected = function() {
  console.log($scope.selected);
  alert(JSON.stringify($scope.selected));
};
15
Vinod Louis

ng-modelディレクティブを使用して、プロパティを要素に直接バインドできます。

例えば.

<input type="checkbox" ng-model="X.Item.Id" />

これによりモデルが更新されます。

これから、モデル内の値をチェックして、どれがチェックされているかを確認できます。

例えば.

angular.forEach($scope.yourModelItems, function(item){
    // item.value ? 0 : 1;
});

ngModel のドキュメントを確認してください。 angularjs.org ホームページのToDoリストの例もこれを示しています。

pS余談ですが、angularディレクティブをhtml5に対応させるには、前にdata-を追加します。例えばdata-ng-model="X.Item.Id"

1
Tim B James
<tr ng-repeat="x in numbers" >
<td><input type="checkbox"  ng-model="selected[x.id]"></td>`<tr ng-repeat="x in numbers" >

次にアクション用のボタン

 <button ng-click="get_all_cheked()">Get checked</button>

そしてコントローラで

 $scope.selected = {};
 $scope.get_all_cheked=function () {
 console.log("click");
 console.log($scope.selected);
 }
0
Leo