Nested ng-repeat Checkboxes in AngularJS Example

Rate this post

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

Nested ng-repeat Example

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.

READ :  Angular RESTful API CRUD Application

Example 2

index.html

[php]

http://infinityknow/jquery.min.js

http://infinityknow/bootstrap.min.js
http://infinityknow/angular.min.js
http://infinityknow/script.js

Select All checkbox to select nested angular ng-repeat checkboxes

{{day.worksDay}}
service:


  • {{pdata.name}}

&nbsp

&nbsp

Click below to have application editdata selected product items in realtime

Toggle editdata on Change Event

&nbsp

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]

Example 1

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

Leave a Reply

Your email address will not be published.