How to directly update a field by using ng-click in AngularJs?

Introduction

Directly updating a field in angular requires updating the variable that has been interpolated or bound to the view. In order to update that variable directives are used. We use directives to attach any action we want to a particular DOM element. Ng-click is one such directive. When ng-click is added to a button element, the behaviour/expression mentioned inside the assignment to ng-click gets added. Upon clicking that button, the expression would get executed. Ng-click acts as a click listener to the element that executes the expression.

<button ng-click=”expression”>click me!</button>

 

Example: To manipulate an integer value field 

To decrement a variable’s value in the view

<button ng-click=”count=count-1” ng-init=”count=10’>
Decrement
</button>
<h2> count: {{count}} </h2>

 

 

Here, the count variable is ten initially; when the button is clicked, the count gets incremented, as is mentioned in the expression. The variable wherever interpolated or bound gets updated instantly

Example: To change the string value with ng-click in AngularJs

The below example adds a click listener(ng-click) to the button that changes the value of the name variable defined initially as Saurabh. The variable used wherever gets updated instantly. 

<head>
   <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>

<body ng-app="second">
 <div ng-controller="app">
   <h1 style="color:blue">
     Hello {{name}}!
   </h1>
   <button style="padding:20px"
       ng-click="name='Adarsh'">
     Click Me
   </button>
 </div>

 <script type="text/javascript">
   var app = angular.module('second', []).controller('app',
   function($scope) {
     $scope.name = "Saurabh";
   });
 </script>
</body>

 

 Output:

 

Example: to calculate the sum of two numbers and update directly in the view

The following example demonstrates addition that updates the sum field 

<head>
   <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>

<body ng-app="second">
 <div ng-controller="app">
  
   <input type="number" ng-model="a" >
   <input type="number" ng-model="b" >
   <button style="padding:20px"
       ng-click="sum=a+b">
     calculate sum
   </button>
   <h3 ng-init="sum=0">{{sum}}</h3>
 </div>

 <script type="text/javascript">
   var app = angular.module('second', []).controller('app',
   function($scope) {
     $scope.a=0;
     $scope.b=0;
   });
 </script>
</body>

 

 

FAQs

  1. What is a directive?
    Directives are markers for HTML dom elements that add a particular function or behaviour to the event listeners to that element. The ng-init directive adds and initializes a variable to its scope. ng-repeat is used to repeat HTML elements over a loop. Many more such directives exist like ng-if,ng-show,ng-bind.
     
  2. Can a function be triggered from ng-click in AngularJs?
    Ng-click in AngularJs can trigger a function defined in its scope that contains the behaviour or action we want. 
     
$scope.count=0;
$scope.increment=function(){
$scope.count=$scope.count+1;
           }
  <element ng-click=”increment()”> </element> 
  
   <p>{{count}}</p>

 

Key Takeaway

Congratulations on making it here. With this article, you learned how to update a field in your view with an ng-click in AngularJs. You got to see the concept behind directives with examples. You also saw multiple examples of how ng-click in AngularJs changes the fields in the view. 

You can learn about AngularJs for free by starting here Learn AngularJs.

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think