ng-repeatチェックボックスに複数のselectボタンがあるリストを作成しようとしています。 HTMLコードネストされたng-repeatのすべてのチェックボックスの選択方法
<div class="col-xs-12"ng-repeat="items in testArray">
<div class="col-xs-6">
{{items.brand}}
</div>
<div class="col-xs-6 col-sm-offset-6">
<button ng-click="selectAll()">select All</button>
<div ng-repeat="i in items.form">
<input type="checkbox"/>{{i.formName}}
</div>
</div>
</div>
は以下のコードスニペットを見て、これはあなたにアイデアを与えるでしょう。
var app = angular.module("myApp",[]);
app.controller('demoCtrl',function($scope){
$scope.itemsArray = [{name:"Test 1",forms:[{formName:"xyz 1 "},{formName:"xyz 1 "}]},{name:"Test 2",forms:[{formName:"xyz 2 "},{formName:"xyz 1 "}]},{name:"Test 3 ",forms:[{formName:"xyz 3"},{formName:"xyz 1 "}]}];
$scope.selectAll = function(item){
for(var i =0;i < item.forms.length;i++)
{
item.forms[i].isChecked = true;
}
}
$scope.removeAll = function(item) {
for(var i =0;i < item.forms.length;i++)
{
item.forms[i].isChecked = false;
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="demoCtrl">
<div ng-repeat="item in itemsArray">
<span>{{item.name}}</span>
<button ng-click="selectAll(item)"> select All </button>
<button ng-click="removeAll(item)"> Deselect All </button>
<div ng-repeat="i in item.forms">
<input type="checkbox" ng-model="i.isChecked"/>
</div>
</div>
</div>
</div>ここでチェックボックスの値を配列に渡すことができます@Tharindu Senanayake –
ありがとう多く。あなたは私の一日を作った –
ようこそ@TharinduSenanayake –
あなたは単にtrue
ng-click="selectAll = true"
に変数を設定し、内部表現が
ng-checked="selectAll"
ng-checkedディレクティブを使用することができます
HTML
<div class="col-xs-12"ng-repeat="items in testArray">
<div class="col-xs-6">
{{items.brand}}
</div>
<div class="col-xs-6 col-sm-offset-6">
<button ng-click="selectAll = true">select All</button>
<div ng-repeat="i in items.form">
<input type="checkbox" ng-checked="selectAll"/>{{i.formName}}
</div>
</div>
</div>
チェックされたチェックボックスの値を配列に取得する必要があります。どうやってやるの？そして助けてくれてありがとう –
'ng-change =" toggle（i） "' 'i 'を配列に追加するコントローラ内の関数を呼び出す – Weedoze
ngChecked指示を確認してください。あなたの入力
<input type="checkbox" ng-checked="i.isChecked" />
に追加する必要があり、その後のSelectAll（）メソッドのセットでtrueにすべてのアイテムのプロパティをにisChecked。 http://jsfiddle.net/deeptechtons/TKVH6/
//html
<div>
<ul ng-controller="checkboxController">
<li>Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
</div>
//js
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function() {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});
html：
<body ng-app="test" ng-controller="testctrl">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-click="test($event)">SelectAll</label>
<div ng-repeat="option in options">
<input type="checkbox" ng-model="option.selected">checkbox</div>
</body>
Gopinathに感謝しますが、入れ子にしてチェックボックスをチェックする必要がありますng-repeat。上記のコードでは、ng-repeatsをネストしました –
実装が同じであれば、それ以上のロジックをつかんでください:) –
あなたがあなたの必要性に応じて https://plnkr.co/edit/qD7CABUF9GLoFCb8vDuO?p=preview
$scope.test=function(event){
if(event.currentTarget.checked==true)
{
var togglestatus=$scope.isAllSelected;
angular.forEach($scope.options,function(object){
object.selected=togglestatus
})
}else{
angular.forEach($scope.options,function(object){
object.selected=false
})
}
}
を、それを操作することができit.this例を試すことができます - "すべてを選択" 要件のためにあなたの必要を紹介フィドルを、作成した
あなたはもう少し説明していただけますか？コードの現在の状態を構成するjsfiddleは素晴らしいでしょう。 – Yuvraj