How to show a span element for each rows clicked in AngularJS ?
Last Updated :
08 Sep, 2022
In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span element can be used to highlight, show, hide or do any particular action on it based on a function. Angular provides several directives by which the span element can be easily manipulated. Some of the examples are given below:
Approach 1: This is a basic rating giving HTML code. Here the span elements are the checked and checked star symbols. The ng-show and ng-hide are used to show or hide the checked or unchecked star symbol. Here the click is used to manipulate the value of a variable which in turn shows the checked star symbol.
Syntax:
<button ng-click="[A FUNCTION CALL] >
Click!
< button>
<span ng-show="[An boolean Expression] >
The element
< /span>Example 1: In this example, the span element for every row clicked will be displayed in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Angular Span element on click
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.checked {
color: orange;
}
.rateButton {
border-radius: 12px;
background-color: goldenrod;
}
table {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Displaying the span element for
each rows clicked in AngularJS
</h3>
<div ng-app="mainApp"
ng-controller="RatingController">
<table>
<tr>
<td>Rate Product</td>
<!--The first star is either checked or
unchecked based on the value of the
rating variable and same for the
rest 4 stars-->
<td>
<span ng-show="rating>=1"
ng-hide="rating<1"
class="fa fa-star checked">
</span>
<span ng-hide="rating>=1"
ng-show="rating<1"
class="fa fa-star unchecked">
</span>
<span ng-show="rating>=2"
ng-hide="rating<2"
class="fa fa-star checked">
</span>
<span ng-hide="rating>=2"
ng-show="rating<2"
class="fa fa-star unchecked">
</span>
<span ng-show="rating>=3"
ng-hide="rating<3"
class="fa fa-star checked">
</span>
<span ng-hide="rating>=3"
ng-show="rating<3"
class="fa fa-star unchecked">
</span>
<span ng-show="rating>=4"
ng-hide="rating<4"
class="fa fa-star checked">
</span>
<span ng-hide="rating>=4"
ng-show="rating<4"
class="fa fa-star unchecked">
</span>
<span ng-show="rating>=5"
ng-hide="rating<5"
class="fa fa-star checked">
</span>
<span ng-hide="rating>=5"
ng-show="rating<5"
class="fa fa-star unchecked">
</span>
</td>
<td>
<button ng-click="Rating()"
class='rateButton'> Click
</button>
</td>
</tr>
</table>
</div>
<script>
var app = angular.module("mainApp", []);
app.controller('RatingController', function($scope) {
$scope.rating = 0;
$scope.Rating = function() {
$scope.rating++;
};
});
</script>
</body>
</html>
Output:
Approach 2: This example shows how a part of the text can be hidden using the span and ng-if for selective viewers(here who knows the password is 12345). Here the click event is done using the event binding technique of angular. The Type Of event binding used is called Target event binding. The NgForm is used to trigger the functions using the event binding technique. In this technique, the event is bound in parenthesis () and the name of the event is the type of the button that is intended to create it.
Syntax:
<form (nameOfEventBinder)="Function Call"> </form>
<button type="nameOfEventBinder"> Click! <button>
<span ng-if="[An boolean Expression]> The element </span>
Example 2: In this example, the form containing the password field, is used where the hidden text data will render the data according to the input.
test.html
<h1>GeeksforGeeks</h1>
<h3>
Displaying the span element for
each rows clicked in AngularJS
</h3>
<table>
<tr>
<td>
The Hidden text is:
<span *ngIf="show==0" class="hidden">
text is hidden here
</span>
<span *ngIf="show==1" class="show">
This is the hidden text!!
</span>
<span *ngIf="show==2" class="error">
Wrong Password
</span>
</td>
</tr>
<tr>
<td>
<label for="psw">
Enter password to reveal text
</label>
<form (submit)="check(form)"
(reset)="reset(form)"
#form='ngForm'>
<input type="password"
ngModel #psw="ngModel"
name="psw"
placeholder="Enter Password"
width="20000">
<button type="submit">
submit
</button>
<button type="reset">
reset
</button>
</form>
</td>
</tr>
</table>
h1,
h3 {
text-align: center;
}
h1 {
color: green;
}
.hidden {
font-weight: bold;
}
.show {
color: green;
}
.error {
color: red;
}
table {
margin-left: auto;
margin-right: auto;
}
import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";
@Component({
selector: "app-test-html-component",
templateUrl: "./test.html",
styleUrls: ["./test.css"],
})
export class TestComponent {
show: any = 0;
check(form: NgForm) {
if (form.value.psw === "12345") {
this.show = 1;
} else {
this.show = 2;
}
}
reset(form: NgForm) {
form.value.psw = "";
this.show = 0;
}
}
Output: From the below output, Initially, the text that will display is "text is hidden here". While entering the correct password i.e. 12345, it will display the text "This is the hidden text!!" in green color, whereas, when the entered password is incorrect then it will display the "Wrong Password" in red color.
Similar Reads
How to Scroll to an Element on click in Angular ?
In this article, we will see how to scroll to an element on click in Angular. Here, we will create a component that enables scrolling to specific targets when a button is pressed within the document from one target to another.Steps for Installing & Configuring the Angular ApplicationStep 1: Crea
4 min read
How to get original element from ng-click in AngularJS ?
In AngularJS, we can get the original DOM element that fired the ng-click event using the event's currentTarget property. Getting the event's currentTarget can be useful when we want to track an element's activity, in this case, whether and how many times a particular element is clicked, or we want
3 min read
How to select an element by its class name in AngularJS?
Given an HTML document and the task is to select an element by its className using AngularJS. The elements can be selected with the help of a class name using the document.querySelector() method that is used to return the first element that matches a specified CSS selector(s) in the document. Approa
2 min read
How to call a function on click event in Angular2 ?
A Function is a set of statements that takes input, does some specific computation, and produces output. An on click event occurs when the user clicks on an element. In this article, we will see How to call a function on click event in Angular2, along with understanding the basic implementation thro
3 min read
How to push elements in an array using AngularJS ?
Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr
2 min read
How to hide an HTML element via a button click in AngularJS ?
In this article, we will see how to use a toggle button feature to hide and display an element by button click in Angular. The toggle button is a user interface control that may be useful for situations when the user wants to switch between 2 states or conditions. For instance, in our smartphone, we
2 min read
How to Delete a Row from Table using AngularJS ?
Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS.Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table a
2 min read
How to append a new table row in AngularJS ?
In this article, we will see how to insert or append the new table row in AngularJS, along with knowing its implementation through the examples. Approach: The approach is to use the push() method to insert the new rows into the array. This array will be served as the content to the <tr> elemen
2 min read
What is the use of a double-click event in AngularJS ?
The ng-dblclick event in the AngularJS is useful for the HTML elements for getting the double click event, defined. In case a user wishes to get the function fired or other events when the double click of the HTML elements is done, then this event will be going to be needed. All the elements of the
2 min read
How to set id attribute of an element dynamically using AngularJS ?
In this article, we will see how to change the ID of any element dynamically using AngularJS, along with understanding its implementation through examples.Approach 1: In this approach, a function is called when the button is clicked, which changes the ID of the element to id-5. We are calling a func
3 min read