Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

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

Author Aditya kumar
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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. 
Check out this problem - Subarray Sum Divisible By K

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

Previous article
Adding multiple functions in one ng-click Directive
Next article
Adding Dynamic Options for Multiple Selects Inside ng-repeat Directive
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass