Great! Each time you click on the number of likes, the number goes up. How does it work?
- The
ng-click
is a directive. When<p class="likes">
is clicked,ng-click
tells 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’slikes
property.
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.