CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Imi
Imi

Reputation: 549

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

Upvotes: 2

Views: 9395

Answers (4)

Sravan
Sravan

Reputation: 18647

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

Upvotes: 2

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

Pass your input to your function

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

partly solved plunker:

https://plnkr.co/edit/aTo8FsMo5hgTGc2TM5Dx?p=preview

Upvotes: 1

raina77ow
raina77ow

Reputation: 106385

Rewrite the function you call so it gets its row as an argument:

... ng-change="onChange(data)" ...

... then use the provided row as source of info:

$scope.onChange = function(row){
  alert(row.name); // Aggregators or Index
};

Plunkr. As a sidenote, I'd strongly recommend using console.log instead of alert.

Upvotes: 2

Matt Way
Matt Way

Reputation: 33171

What you need to do is pass the value into your onChnage() function. For example:

<input ... ng-change="onChnage(data.model)" ... />

Notice that you are now providing the current value of checkbox to the onchange function.

$scope.onChnage = function(isChecked){
    console.log(isChecked);

    ...
};

Upvotes: 1

Related Questions