AngularJS Nested ng-repeat Get Multiple checkbox value

AngularJS Nested ng-repeat Get Multiple checkbox value

In this Post We Will Explain About is AngularJS Nested ng-repeat Get Multiple checkbox value With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS – Retrieve Multiple Checkbox Selected OptionsExample

In this post we will show you Best way to implement Check multiple checkbox of nested ng-repeat in angularjs, hear for Nested ng-repeat, checkboxes and ng-modelwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Nested ng-repeat in AngularJS with Checkboxes

Make a External js file and define Libs.

  <a href="http://jquery.min.js">http://jquery.min.js</a>
  
  <a href="http://bootstrap.min.js">http://bootstrap.min.js</a>
  <a href="http://angular.min.js">http://angular.min.js</a>

Make a HTML file and define markup

  <div class="container">
    <div class="page-header">
      <h2>Nested ng-repeat in AngularJS with Checkboxes</h2>
    </div>
    <div style="font-size:larger">
      <div>
        <div>
          {{lwork.productCat}}
          <b>Jobs:</b>
          <br />
          <ul>
            <li>
               {{job.name}}
            </li>
          </ul>
        </div>
        <div>
          <button class="btn btn-primary">
            Get Selected Products
          </button>
               Toggle Update on Change Event
        </div>
      </div>
    </div>
    <div>
      <h4>Selected Products</h4>
      <pre class="small">{{liveselectData |json}}</pre>
    </div>
  </div>

Make a js file and define scripting

var liveApp = angular.module('liveApp', []);
liveApp.controller('liveCtrl', function($scope) {

  $scope.update = {currentTime : true};
  $scope.totalProducts = [{
    "number": "2018-W45",
    "days": [{
      "productCat": "Web-Devlopments",
      "post": [{
        "name": "PHP",
      }, {
        "name": "Laravel 9-5",

      }]
    }, {
      "productCat": "Software-Devlopments",
      "post": [{
        "name": "Asp.net"
      }, {
        "name": "VB.net"
      }, {
        "name": "C# MVC"
      }]
    }]
  }];

  $scope.getSelectedProducts = function(_event) {
    var data = $scope.totalProducts;
    var respnose = [];
    var lwork = null;
    
    if (!_event && !$scope.update.currentTime) {
      return
    }
    
    angular.forEach(data,function(_week){
      angular.forEach(_week.days,function(_day){
        lwork = _day;
        angular.forEach(_day.post,function(_job){
          if (_job.checked === true) {
            _job.lwork = lwork.productCat;
            respnose.push(angular.copy(_job));
          }
        });
      });
    });

    $scope.liveselectData = respnose;
  }
});

Example

READ :  Vuejs Form Validation using Laravel with PHP

I hope you have Got What is Push New Elements Inside an ngRepeat Array from AngularJS $scope And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Add a Comment

Your email address will not be published. Required fields are marked *