Nested ng-repeat Checkboxes in AngularJS Example
Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming post presented in an easy-to-follow manner. Each web programming Post has all the practical examples with web programming script and screenshots available.For Nested ng-repeat Checkboxes in AngularJS
1.set in angular to checklist-model instead of ng-model
2.set in angular to checklist all the select value
– what should be here picked as array item
here Example of how to all the render data in display nested ng-repeat(s) all data and get data items the selected product items from the nested list all the checkbox in real-time through a change event or looping through the data value in the end.
index.html
[php]
http://infinityknow/jquery.min.js
http://infinityknow/bootstrap.min.js
http://infinityknow/angular.min.js
http://infinityknow/script.js
Nested ng-repeat in AngularJS with Checkboxes Example
here simple angularjs Example of how to all get and the render some data in view results nested ng-repeat(s) all fetch data and retrive data products the selected some product products from the nested list all the checkbox cheked in real-time through a property change event or for ng-repeat looping through the get data display value in the end.
service:
-
{{pdata.name}}
 
 
Click below to have application editdata selected product items in realtime
Toggle editdata on Change Event
 
Selected product Items
{{resultData |json}}
Source Data
{{productData |json}}
[/php]
Script.js
[php]
var app = angular.module(‘infinityknow’, []);
app.controller(‘nestedCtrl’, function($scope) {
$scope.editdata = {realtime : false};
$scope.productData = [{
“number”: “2013-W45”,
“days”: [{
“worksDay”: “Monday”,
“service”: [{
“name”: “early”,
}, {
“name”: “work 9-5”,
}]
}, {
“worksDay”: “Tuesday”,
“service”: [{
“name”: “My Ng Data live24u”
}, {
“name”: “Simple Pakainfo.com”
}, {
“name”: “Example of Data Pakainfo.com”
}]
}]
}];
$scope.selectGetDataItems = function(_event) {
var data = $scope.productData;
var results = [];
var day = null;
if (!_event && !$scope.editdata.realtime) {
return
}
angular.forEach(data,function(_week){
angular.forEach(_week.days,function(_day){
day = _day;
angular.forEach(_day.service,function(_pdata){
if (_pdata.checked === true) {
_pdata.day = day.worksDay;
results.push(angular.copy(_pdata));
}
});
});
});
$scope.resultData = results;
}
});
[/php]
We hope you get an idea about
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.
We hope This Post can help you…….Good Luck!.