Not able to get the passed argument in ng-checked function

Question

I called a function in ng-checked to check of the current checkbox's value is 'test' or not if it is checked then the checkbox should be checked or else the checkbox should be unchecked

To achieve this I passed this.value as an argument for show function which is called in ng-checked. But this this.value is undefined when logged in console . Even when I pass the event object inside the function as a parameter it is returning undefined.

Please checked the below code :

var app = angular.module('app', []);

app.controller('mainController', function($scope, $http) {
    $scope.show = function(val) {
        console.log(val);
        if (val == 'test') {
            return true;
        } else {
            return false;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app">
    <div ng-controller="mainController">
     <input type="checkbox" value="test" ng-checked="show(this.value)"/>
    </div>
</div>

Thanks in advance :)

mike_t · Accepted Answer · 2017-12-18T11:12:25.047

2

You might want to use the ng-model instead of ng-checked

var app = angular.module('app', []);

app.controller('mainController', function($scope, $http) {
  $scope.test = false
  $scope.show = function(val) {
      $scope.test = val
  }

  /// after fetching data from your server, 
  /// you can set checked by calling:
  $scope.show(true)
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <input type="checkbox" ng-model="test"   />
     
  </div>
</div>

edited Dec 18 '17 at 11:12

answered Dec 18 '17 at 09:58

mike_t

2,484
2
21
39

No, actually I'm getting some data from the server. The data will be either true or false, so depending on this boolean variable's value I'll either check or uncheck the checkbox – Harish Dec 18 '17 at 10:01
i updated the answer, in this case you only set the model value based on the data coming from server – mike_t Dec 18 '17 at 10:04
Okay, I'll give it a try – Harish Dec 18 '17 at 10:07
It is working but why can't I send this.value inside a function which is called in ng-checked? – Harish Dec 18 '17 at 10:31
`this` scope will not work with angular. And it doesn't really make sense to reference `value` as variable, when you have it hardcoded in value field anyway. You could achieve what you wanted by calling explicitly show('test') in your original code, but it's much better practice to use ng-model if you are dealing with model data coming from server, as it will take care of setting the proper state of your inputs – mike_t Dec 18 '17 at 10:46
please accept the answer if it helped you resolve the issue. – mike_t Dec 18 '17 at 11:04
1

You are awesome, Thank you so much :) – Harish Dec 18 '17 at 11:09

Not able to get the passed argument in ng-checked function

1 Answers1