Great! Each time you click on the number of likes, the number goes up. How does it work?
ng-clickis a directive. When
<p class="likes">is clicked,
ng-clicktells AngularJS to run the
plusOne()function in the controller.
plusOne()function gets the index of the product that was clicked, and then adds one to that product’s
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.
In the controller in the
$scope.products array, add a new property named
dislikes to each element. Set
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
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.