Great! Each time you click on the number of likes, the number goes up. How does it work?
- The
ng-clickis a directive. When<p class="likes">is clicked,ng-clicktells AngularJS to run theplusOne()function in the controller. - The
plusOne()function gets the index of the product that was clicked, and then adds one to that product’slikesproperty.
Notice that the plusOne() doesn’t interact with the view at all; it just updates the controller. Any change made to the controller shows up in the view.
Instructions
In the controller in the $scope.products array, add a new property named dislikes to each element. Set dislikes to 0.
In the view under <p class="likes">, add an element for <p class="dislikes">. Then display a product’s dislikes using an expression.
Back in the controller after $scope.products, attach a new property to $scope named minusOne. Set it equal to a function that adds one to a product’s dislikes property. Adapt the code from the plusOne() function to do this.
In the view, use ng-click to trigger the minusOne() function when <p class="dislikes"> is clicked.
View the AngularJS app in the browser. Click on the -0 in each product tile.