Search code examples
javascriptangularjsangularjs-scope

how can I use ng-change inside ng-repeat


I am trying to execute a function inside ng-change every time a check box is clicked.I need to get the value of model or somehow know which check box was clicked so that I can call another corresponding function for the checked value and also when when that checkbox was unclicked so that I can hode some values

not sure if the approach I am using is correct but this is my code: plunker

HTML

 <input type="checkbox" ng-model="data.model" ng-change="onChnage()" class='checkbox'>

JS

$scope.onChnage = function(){
    if($scope.index == true){
        $scope.indexonClick();
    } else if($scope.aggs == true){
        $scope.aggsonClick();
    } else if($scope.index == false){
        console.log('false');
    }
};

$scope.indexonClick = function(){
    alert('index Clicked!');
}

$scope.aggsonClick = function(){
    alert('aggs Clicked!');
};

Solution

  • Pls check this code,

    // Code goes here
    
    var app = angular.module('plunker', []);
    
    app.controller('MainCtrl', function($scope) {
      
    
      $scope.tableData = [{
        name: 'Index',
        url: '#',
        valueMain: 12,
        tValue: 13,
        model: 'index',
        subvalues: [{
          name: 'Keys',
          url: '#',
          valueSub: 544,
          tValue: 67
        }, {
          name: 'Leaders',
          url: '#',
          valueSub: 67,
          tValue: 89
        }]
      }, {
        name: 'Aggregators',
        url: '#',
        valueMain: 78,
        tValue: 91,
        model: 'aggs',
        subvalues: [{
          name: 'TPM',
          url: '#',
          valueSub: 11,
          tValue: 13
        }, {
          name: 'Pollster',
          url: '#',
          valueSub: 23,
          tValue: 45
        }]
    
      }];
      
      
      $scope.onChnage = function(value,test){
        console.log(test)
        if(value.model=='index'){
          $scope.indexonClick(test)
        } else if(value.model=='aggs'){
          $scope.aggsonClick(test)
        } else if($scope.index==false){
          console.log('false')
        }
      };
      
      $scope.indexonClick= function(test){
        var value = (test == true ? 'clicked' : 'un clicked')
        alert('index ' + value)
      }
      
      $scope.aggsonClick = function(test){
        var value = (test == true ? 'clicked' : 'un clicked')
         alert('aggs ' + value)
      };
    });
    <!DOCTYPE html>
    <html ng-app="plunker">
    
    <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>
      <link rel="stylesheet" href="style.css" />
      <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
      <script src="script.js"></script>
    </head>
    
    <body ng-controller="MainCtrl">
      <table class='table'>
        <thead>
          <tr>
             
            <th>name</th>
            <th>itemOne</th>
            <th>itemTwo</th>
            <th>model</th>
          </tr>
        </thead>
        <tbody ng-repeat="value in tableData| orderBy:'-valueMain'">
          <tr>
           
            <td>
              <button ng-show="value.expand" ng-click='value.expand = false'>-</button>
              <button ng-show="!value.expand" ng-click='value.expand = true'>+</button>
              <input type="checkbox" ng-model="test" ng-change="onChnage(value,test)" class='checkbox'
    >
              <a rel="noopener" target="_blank" href={{value.url}}>
    		{{value.name}}
    		</a>
            </td>
            <td>{{value.valueMain}}</td>
            <td>{{value.tValue}}</td>
            <td>{{value.model}}</td>
            <tr>
              <tr ng-show="value.expand" ng-repeat="subs in value.subvalues| orderBy:'-valueSub'" >
                <td>
                  {{subs.name}}
                </td>
                <td>
                  {{subs.valueSub}}
                </td>
                <td>
                  {{subs.tValue}}
                </td>
                 
              </tr>
            </tr>
    
          </tr>
        </tbody>
      </table>
    </body>
    
    </html>

    Pls run this code snippet

    Here is the plunker