How to create a click button in Angular JS

Home > Search > How-to
  by

In this example, the Angular controller will pass item to the View, and then the buttons in the view will increments the values.

 

Controller

The following Controller will store the members of the Simpsons family in a variable named myVariable. There are also two increment functions, to increment likes and dislikes.

var myApp = angular
	.module("myModule", [])
	.controller("myController", function ($scope) {
	var FamilyMembers = [
		{name: "Bart Simpson", likes: 0, dislikes: 0},	
		{name: "Lisa Simpson", likes: 0, dislikes: 0},	
		{name: "Homer Simpson", likes: 0, dislikes: 0},	
		{name: "Marge Simpson", likes: 0, dislikes: 0},			
		];
	
	$scope.myVariable = FamilyMembers;
	$scope.incrementLikes = function(Simpsons) {
		Simpsons.likes ++;
	}
	$scope.incrementDislikes = function(Simpsons) {
		Simpsons.dislikes ++;
	}	
});

 

View

In the view, the following markup can be used to create a table with buttons to increment likes or dislikes. The ng-click directive is used to add buttons that increment likes and dislikes.

<head>
    <script src="js/angular.min.js"></script>
    <script src="js/myAngular.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
	<table class="table-f6f6f6">
          <tr>
	    <th>Name</th>
	    <th>Likes</th>
	    <th>Dislikes</th>
	    <th>Like/Dislike</th>					
	  </tr>
	  <tr ng-repeat="Characters in myVariable">
	    <td>{{ Characters.name }}</td>	
	    <td>{{ Characters.likes }}</td>
	    <td>{{ Characters.dislikes }}</td>
	    <td>
	      <input type="button" value="Like" ng-click="incrementLikes(Characters)">
	      <input type="button" value="Dislike" ng-click="incrementDislikes(Characters)">
	    </td>					
	  </tr>				
      </table>
   </div>

 



Add a Comment




We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.




Please enter in the box below so that we can be sure you are a human.




Comments