ng-change increment and decrement value in ng-repeat loop

I have a code like this:

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Welcome to LearnKode - A code learning platform</title>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    </head>
    <body ng-app="changeExample">
        <div ng-controller="ExampleController">
            <div class="container">
                <div class="col-md-3 well">
                    Are you developer  <input type="checkbox" ng-model="isTrue" ng-change="count=count+1" />
                   Count: {{count}}
                    <pre>{{isTrue}}</pre>
                </div>
            </div>
        </div>
        <script>
        var app = angular.module("changeExample", []);
        app.controller('ExampleController', ['$scope', function ($scope) {
            $scope.isTrue = true;
        }]);
    </script>
    </body>
    </html>

In this code when check the checkbox the count will be incremented. Here how to i check if checkbox is ticked, then only incremented, otherwise if untick, it will decremented. Please anyone help.

Answer

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Welcome to LearnKode - A code learning platform</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>

<body ng-app="changeExample">
  <div ng-controller="ExampleController">
    <div class="container">
      <div class="col-md-3 well">
        Are you developer
        <input type="checkbox" ng-model="isTrue" ng-change="isTrue ? (count=count+1) :(count=count-1) " />Count: {{count}}
        <pre>{{isTrue}}</pre>
      </div>
    </div>
  </div>
  <script>
    var app = angular.module("changeExample", []);
    app.controller('ExampleController', ['$scope',
      function($scope) {
        $scope.isTrue = false;
      }
    ]);
  </script>
</body>

</html>

try changing ng-change .

Advertisement

Answer