USE ng-click WITH BUTTON
JS var app = angular.module('module1', []);
app.controller("myController", function ($scope) {
var sweets = [
{ name : "Jalebi", likes : 0, dislikes : 0 },
{ name : "Gulab Jamun", likes : 0, dislikes : 0 },
{ name : "Gujiya", likes : 0, dislikes : 0 }
]
$scope.sweets = sweets;
$scope.plusLikes = function (sweet) {
sweet.likes ++;
}
$scope.plusDislikes = function (sweet) {
sweet.dislikes --;
}
});
HTML
<body ng-app="module1">
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>Name</th> <th>Likes/th> <td>Dislikes</td><th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sweet in sweets">
<td> {{ sweet.name }} </td>
<td> {{ sweet.likes }} </td>
<td> {{ sweet.dislikes }} </td>
<td>
<input type="button" value="Like"
ng-click="plusLikes(sweet)">
<input type="button" value="Dislike"
ng-click="plusDislikes(sweet)">
</td>
</tr>
</tbody>
</table>
</div>
It will display a table with 3 columns : Sweet name, Likes and Dislikes with initial data.
On click on Like button, It will increment "likes" property.
On click on Unlike button, It will increment "dislikes" property.
All the updates are immediately reflect the new values on GUI.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.