Angularjs selectallチェックボックスを使用

私はAngularjsを初めて利用しています。私は私といくつかのレガシーコードを持っています。親チェックボックスを選択すると、すべてのチェックボックスを選択したいと思います。以下は私の親チェックボックスです。Angularjs selectallチェックボックスを使用

<div class="form-group"> 
    <label for="test" class="col-xs-3 control-label"></label> 
    <input type="checkbox" class="col-xs-1" checked> 
</div>

誰かがこれを確認した場合、残りのすべてのチェックボックスがchecked.Belowする必要があり、私は多くの提案を試みたが、何も動いていないようにみえ私の子供のチェックボックス

<div class="form-group"> 
    <label for="firstName" class="col-xs-3 control-label">First Name</label> 
    <input id="{{fields[0].name}}" type="checkbox" value="{{fields[0].name}}" ng-checked="selection.indexOf(fields[0].name) > -1" ng-click="toggleSelection(fields[0].name)" class="col-xs-1" /> 
    <div ng-class="{'col-xs-4':test && !tableView, 'col-xs-8':!isAvailable || test && tableView, 'review-column': true, even: true}"> 
    <input type="text" class="form-control" id="name2" ng-model="data.name.firstName" focus="" value="{{data.name.firstName}}"></input> 
</div>

です。コントローラjsコードと一緒にそうするために正しいHTMLを指し示すことができます。何度もお世話になります。

出典

2016-10-25 coder310

それらのすべて – Araz

に同じngのモデルを使用するか、親のチェックボックスのためにNG-モデルを使用して実行してくださいそのng-modelの他のチェックボックスについてng-checkを実行してください。 – Araz

sリンクhttp://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-checked –

select_all check-box featureを達成するためにカスタムディレクティブを使用してください。

これを達成するための例を示します。

var app = angular.module('angularjs-starter', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.list = [{ 
 
     isSelected: true, 
 
     desc: "One" 
 
    }, { 
 
     isSelected: false, 
 
     desc: "Two" 
 
    }, { 
 
     isSelected: false, 
 
     desc: "Three" 
 
    }]; 
 
}); 
 

 
app.directive('checkboxAll', function() { 
 
    return function(scope, iElement, iAttrs) { 
 
    var parts = iAttrs.checkboxAll.split('.'); 
 
    iElement.attr('type','checkbox'); 
 
    iElement.bind('change', function (evt) { 
 
     scope.$apply(function() { 
 
     var setValue = iElement.prop('checked'); 
 
     angular.forEach(scope.$eval(parts[0]), function (v) { 
 
      v[parts[1]] = setValue; 
 
     }); 
 
     }); 
 
    }); 
 
    scope.$watch(parts[0], function (newVal) { 
 
     var hasTrue, hasFalse; 
 
     angular.forEach(newVal, function (v) { 
 
     if (v[parts[1]]) { 
 
      hasTrue = true; 
 
     } else { 
 
      hasFalse = true; 
 
     } 
 
     }); 
 
     if (hasTrue && hasFalse) { 
 
     iElement.attr('checked', false); 
 
     iElement.addClass('greyed'); 
 
     } else { 
 
     iElement.attr('checked', hasTrue); 
 
     iElement.removeClass('greyed'); 
 
     } 
 
    }, true); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="angularjs-starter"> 
 
    
 
    <head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Custom Plunker</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script> 
 
     document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <script src="app.js"></script> 
 
    </head> 
 
    
 
    <body ng-controller="MainCtrl"> 
 
    <div> 
 
     <input checkbox-all="list.isSelected" /> Select All 
 
    </div> 
 
    <div ng-repeat="elem in list"> 
 
     <input type="checkbox" ng-model="elem.isSelected" /> {{elem.desc}} 
 
    </div> 
 
    </body> 
 

 
</html>

このコード

HEre is the plunker of the code

出典

2016-10-25 06:57:27 Sravan

@ coder310、plsは同じものを実装しています。私はあなたのデータを持っていないので、私はコードを実行し、また私が与えたプランカのリンクをチェックします。 – Sravan

@ coder310、これをチェックしましたか？ – Sravan

<div class="form-group"> 
    <label for="test" class="col-xs-3 control-label"></label> 
    <input type="checkbox" class="col-xs-1" ng-model="checkbox"> 
</div> 

<div class="form-group"> 
    <label for="firstName" class="col-xs-3 control-label">First Name</label> 
    <input id="{{fields[0].name}}" type="checkbox" value="{{fields[0].name}}" ng-checked="checkbox" class="col-xs-1" /> 
    <div ng-class="{'col-xs-4':test && !tableView, 'col-xs-8':!isAvailable || test && tableView, 'review-column': true, even: true}"> 
    <input type="text" class="form-control" id="name2" ng-model="data.name.firstName" focus="" value="{{data.name.firstName}}"></input> 
</div>

出典

2016-10-25 07:01:05 Araz

Angularjs selectallチェックボックスを使用

答えて

関連する問題