Angularjs selectall using checkbox

Я новичок в Angularjs. У меня есть код устаревшего кода. Я хочу выбрать все флажки, если выбрана родительская флажка. Ниже мой родительский флажок.Angularjs selectall using checkbox

<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>

Я пытался много предложений, но ничего не похоже на работу. Может ли кто-то указать один правильный html, чтобы сделать это вместе с кодом контроллера js. Большое спасибо

источник

2016-10-25 coder310

используют один и тот же нг-модели для всех из них – Araz

или использовать нг-модель для родительского флажком а затем ng-check для других флажков с этой ng-моделью – Araz

follow thi s link 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 реализовать то же самое, просто измените свои данные, так как у меня не было ваших данных, я создал пример code.pls, запустил код, а также проверил ссылку plunker, которую я дал. – 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 using checkbox

ответ

Смежные вопросы