2

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!');
};
Imi
  • 529
  • 2
  • 8
  • 23

4 Answers4

2

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.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • "**As a sidenote, I'd strongly recommend using console.log instead of alert.**": so why did you use `alert()`? – Mistalis Oct 19 '16 at 13:06
  • 1
    Because it was in the original post, and I don't know the intentions of its author. In general, yes, `console` is a much better servant. – raina77ow Oct 19 '16 at 13:08
  • @raina77ow: but I want to get the value of ng-model because i want to execute another function based on if the checkbox is clicked or not – Imi Oct 19 '16 at 13:24
  • Then either pass `data.model` directly (as in @MattWay's answer), or extract it inside the function (`if (row.model) { ... }`). BTW, instead of `ng-change` you may just as well listen to data.model changes directly. – raina77ow Oct 19 '16 at 13:34
  • @raina77ow how can I listen to the data model directly? – Imi Oct 19 '16 at 13:43
  • Yet again depends on what you want to do: any component using `data.model` as an expression listens for its changes automatically. If you want something extra, use $scope.$watch either on a separate controller, or on all the elements of the collection(check [this thread](http://stackoverflow.com/questions/20024156/how-to-watch-changes-on-models-created-by-ng-repeat) for details). – raina77ow Oct 19 '16 at 13:52
2

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="angular.js@1.3.x" 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

Sravan
  • 18,467
  • 3
  • 30
  • 54
  • Hi Thank you for your answer I am just thinking why does this just runs once? that is when I open the page for the first time and click on the checkboxses it shows the akert values but if I uncheck and then check it it does not show the value? – Imi Oct 19 '16 at 13:19
  • @imi, check now, both the answer and plunker are updated. – Sravan Oct 19 '16 at 13:29
  • Thanks it works but I still have one question what if I was to unclick the checkboyx right now I dont get any value, if I want to console.log something uique to each checkbox when the checkbox was unchecked – Imi Oct 19 '16 at 13:41
  • @Imi, is that what you needed? – Sravan Oct 19 '16 at 14:06
1

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

    ...
};
Matt Way
  • 32,319
  • 10
  • 79
  • 85
  • Thank you for your answer I tried this approach before but the problem is that I want the values of each checkbox when checked and unchecked because I want to manipulate DOM elements corresponding to these check boxes when checked and unchecked – Imi Oct 19 '16 at 13:45
  • Could you be more specific about "I want to manipulate DOM elements"? – raina77ow Oct 19 '16 at 13:53
  • supose checkbox index is clicked i shows a series of values unique to index and when it is unchecked is hides the series when checkbox aggs is checked it shows the series unique to aggregators and when it is unchecked it hides the series – Imi Oct 19 '16 at 13:56
  • Why are you doing it this way at all then? Why not use ng-show for example? – Matt Way Oct 19 '16 at 13:59
  • ng-show only takes boolean while I need to call a functions hide() and show() also I need to spicify which series to hide or show. – Imi Oct 19 '16 at 14:13
  • 1
    This is exactly what you use ng-show for. You set it to the checked state of the box inside your series wrapper. You should never manipulate dom directly in angular. – Matt Way Oct 19 '16 at 21:01
1

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

Pandiyan Cool
  • 6,381
  • 8
  • 51
  • 87