ng-click not working inside of ng-repeat

Question

I have a directive that displays cards for the user. Each card has an 'aww' or 'naww' button. AngularJS goes through the ng-repeat and generates each card. When the user clicks that button I want the 'aww' or 'naww' value to increment for that particular card. Unfortunately, when I click the buttons now, nothing happens and the values remain at zero. How would I get the aww and naww values to increment for each individual card?

view1.html

<div class="container">
  <div ng-repeat="animal in animals" my-animal="animal"></div>
</div>

view1.js

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope',function($scope) {

$scope.animals = [{'name':'Perry','animal':'Bird','awws':0,'nawws':0, 
                   'image-url': 'https://homebrewedtheology.com/'},
                  {'name':'Max','animal':'Cat','awws':0,'nawws':0,
                    'image-url':'https://pbs.twimg.com/profile_images/567285191169687553/7kg_TF4l.jpeg'
                  },
                  {'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
                    'image-url':'http://animals.ekstrax.com/wp-content/uploads/2014/03/cute-duck-pictures-15.jpg'
                  }];
$scope.add = function(item){
                    item = item + 1;  
                  };
}])

.directive('myAnimal', function() {
  return {
    scope: {
      item: '=myAnimal'
    },
    restrict: 'EA',
    templateUrl: 'view1/card-template.html'
  };
});

cardtemplate.html

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="add(item.awws)" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

do you have any error in the console??

Kram
– Kram

2015-10-27 13:20:02 +00:00
Commented Oct 27, 2015 at 13:20 — Kram
– Kram, Commented Oct 27, 2015 at 13:20
Can you please create live demo on jsfiddle/plunkr

Tushar
– Tushar

2015-10-27 13:21:55 +00:00
Commented Oct 27, 2015 at 13:21 — Tushar
– Tushar, Commented Oct 27, 2015 at 13:21

Tarun Dugar · Accepted Answer · 2015-10-27 13:28:56Z

1

This is happening because '$scope.add' function of your controller isn't inside the scope of your myAnimal directive(which has an isolate scope).

Also, you are using the directive in a wrong way. my-animal is your directive and not an attribute for your directive. First, change your directive calling template to:

<div class="container">
  <div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>

directive to:

.directive('myAnimal', function() {
  return {
    scope: {
      item: '=animal',
      add: '&' //method binding here
    },
    restrict: 'EA',
    templateUrl: 'view1/card-template.html'
  };
});

As you can see I have added another attribute which binds the 'add' function in your controller to the directive, thus making it available in the directive scope. & is used for achieving this.

answered Oct 27, 2015 at 13:28

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kulbhushan Singh · Accepted Answer · 2015-10-27 16:52:52Z

0

Issue is you are passing literal value of aww in ng-click function, where as you should pass the item object and increment its item.awws property.

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="add(item)" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

and in js...

$scope.add = function(item){
                    item.awws += 1;//it might be required to find the item in the collection and then increment it
                  };
}])

Or, the easiest would be to do it directly in HTML

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="item.awws = item.awws + 1" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="item.nawws = item.nawws - 1" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

edited Oct 27, 2015 at 16:52

answered Oct 27, 2015 at 13:25

Kulbhushan Singh

5285 silver badges18 bronze badges

2 Comments

ComicStix Over a year ago

Thanks for the answer. Unfortunately, I am getting this error on the console for both ng-clicks: Syntax Error: Token '=' not a primary expression at column 12 of the expression [item.nawws+=1] starting at [=1]

ComicStix Over a year ago

I got it! You have to do item.awws = item.awws + 1. If you do it the way you did it it gives a parser error. Thanks for the help.

Collectives™ on Stack Overflow

ng-click not working inside of ng-repeat

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related