Nested ng-repeat Checkboxes in AngularJS Example

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.

Example 2

index.html

  <a href="http://infinityknow/jquery.min.js">http://infinityknow/jquery.min.js</a>
  
  <a href="http://infinityknow/bootstrap.min.js">http://infinityknow/bootstrap.min.js</a>
  <a href="http://infinityknow/angular.min.js">http://infinityknow/angular.min.js</a>
   <a href="http://infinityknow/script.js">http://infinityknow/script.js</a>
  
  <title>Select All checkbox to select nested angular ng-repeat checkboxes</title>



  <div class="container">
    <div class="page-header">
      <h2>Nested ng-repeat in AngularJS with Checkboxes Example</h2>
      <p>
       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.
      </p>
    </div>
    <div style="font-size:larger">
      <div>
        <div>
          {{day.worksDay}}
          <b>service:</b>
          <br />
          <ul>
            <li>
              <!-- add ng-change to get realtime editdatas -->
               {{pdata.name}}
            </li>
          </ul>
        </div>
        <div>
          
          <p>&nbsp</p>
          <button class="btn btn-primary">
            Get Selected product Items
          </button>
          <p>&nbsp</p>
          <p>
            Click below to have application editdata selected product items in realtime
            <p>
               Toggle editdata on Change Event
              <p>&nbsp</p>
        </div>
      </div>
    </div>
    <div>
      <h4>Selected product Items</h4>
      <pre class="small">{{resultData |json}}</pre>
      <h4>Source Data</h4>
      <pre class="small">{{productData |json}}</pre>
    </div>
  </div>

Script.js

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;
  }
});

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