CODEWITHSUNDEEP
javascripthtmlcssangularjs
ComicStix
ComicStix

Reputation: 240

ng-click not working inside of ng-repeat

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://goo.gl/Vtcvk5'},
                  {'name':'Max','animal':'Cat','awws':0,'nawws':0,
                    'image-url':'https://goo.gl/bqOQci'
                  },
                  {'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
                    'image-url':'https://goo.gl/v9GyTz'
                  }];
$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>

Upvotes: 0

Views: 584

Answers (2)

Kulbhushan Singh
Kulbhushan Singh

Reputation: 536

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>

Upvotes: 0

Tarun Dugar
Tarun Dugar

Reputation: 8971

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.

Upvotes: 1

Related Questions