CODEWITHSUNDEEP
javascripthtmlangularjs
CloudJake
CloudJake

Reputation: 156

unsure why ng-click isn't working

Hey there I'm new to js Angular and can't figure out what I've done wrong, how do I put an object method inside the ng-click function:

  <div class="container" ng-repeat="exercise in exercises">  
    <div class="row">
      <div class="exercise-icon col-xs-2"> 
        <img ng-src="{{ exercise.icon }}">
      </div>

      <div class="col-xs-6">
        <p class="exercise-name"> {{ exercise.name }} </p>
      </div>

      <div class="col-xs-4 counters">
        <span class="decrease">-</span><span class="count"> {{ exercise.count }}  </span>
             <span class="increase" ng-click="{{exercise.increase($index)}}">+</span>
          </div>
        </div>

This is the controller script:

app.controller('MainController', ['$scope', function($scope) {
  $scope.exercises = [
    {
      icon: 'img/pushup.jpg',
      name: 'Pushups',
      count: 20
    },
    {
      icon: 'img/squat.jpg',
      name: 'Squats',
      count: 15
    },
    {
      icon: 'img/pullup.jpg',
      name: 'Pullups',
      count: 10
    },
    {
      icon: 'img/row.jpg',
      name: 'Rows',
      count: 10
    },
    {
      icon: 'img/lunge.jpg',
      name: 'Lunges',
      count: 10
    },
    {
      icon: 'img/stepup.jpg',
      name: 'Step Ups',
      count: 10
    },
    {
      icon: 'img/situp.jpg',
      name: 'Sit Ups',
      count: 15
    }
  ];

  $scope.increase = function($index) {
    $index.count++;
  };

}]);

The exercise icon, name and count are all showing however the click function is not working for some reason, is the syntax correct for inserting a object method into a ng-click? I couldn't find any applicable answers online. The functionality I would expect is count to increase everytime + is pressed.

Upvotes: 0

Views: 153

Answers (4)

Binh Tran
Binh Tran

Reputation: 11

try this one

<span class="increase" ng-click="increase($index)">+</span>

and you controller 

$index = $index + 1;

Upvotes: 0

Ved
Ved

Reputation: 12103

You can achieve your result without calling a function and doing stuff just inside ng-click itself.

<span class="increase" ng-click="exercises.count =exercises.count+1 ">+</span>

Upvotes: 1

Martijn Welker
Martijn Welker

Reputation: 5605

There are 2 points wrong here, you're calling your function wrongly:

{{exercise.increase($index)}}

should be

increase($index)

and you're treating $index as an object, it should be like so:

$scope.increase = function($index) {
    $scope.exercises[$index].count++;
};

Upvotes: 5

millerbr
millerbr

Reputation: 2961

Change:

<span class="increase" ng-click="{{exercise.increase($index)}}">+</span>

to:

<span class="increase" ng-click="exercise.increase($index)">+</span>

The braces aren't needed in Angular.

Upvotes: 1

Related Questions