June 27, 2018

AngularJS Nested ng-repeat Get Multiple checkbox value

By admin AngularJs, Technology 0 Comments

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.

<head>
  <script src="jquery.min.js"></script>
  <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="bootstrap.min.js"></script>
  <script src="angular.min.js"></script>
</head>

Make a HTML file and define markup

<body ng-app="liveApp" ng-controller="liveCtrl">
  <div class="container">
    <div class="page-header">
      <h2>Nested ng-repeat in AngularJS with Checkboxes</h2>
    </div>
    <div style="font-size:larger">
      <div ng-repeat="week in totalProducts">
        <div ng-repeat="lwork in week.days">
          {{lwork.productCat}}
          <b>Jobs:</b>
          <br/>
          <ul>
            <li ng-repeat="job in lwork.post">
              <input type="checkbox" ng-model="job.checked" ng-change="getSelectedProducts()"> {{job.name}}
            </li>
          </ul>
        </div>
        <div>
          <button class="btn btn-primary" ng-click="getSelectedProducts($event)">
            Get Selected Products
          </button>
              <input type="checkbox" ng-model="update.currentTime"> Toggle Update on Change Event
        </div>
      </div>
    </div>
    <div>
      <h4>Selected Products</h4>
      <pre class="small">{{liveselectData |json}}</pre>
    </div>
  </div>
</body>

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 Conditional show and hide Directives Example

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.

Post Views: 1,079

AngularJS Nested ng-repeat Get Multiple checkbox value

Nested ng-repeat in AngularJS with Checkboxes

Related Posts

Add a Comment