Как показать элемент диапазона для каждой строки, нажатой в AngularJS?

Опубликовано: 18 Декабря, 2021

Элемент span используется для группировки встроенных элементов в документе. Его можно использовать для привязки к определенной части документа, которая может подвергаться определенному действию на основе событий DOM.
Элемент span можно использовать для выделения, отображения, скрытия или выполнения с ним какого-либо конкретного действия на основе функции.
Angular предоставляет несколько директив, с помощью которых можно легко управлять элементом span. Некоторые из примеров приведены ниже:

Подход 1: это базовая оценка, дающая HTML-код. Здесь элементы span - это отмеченные и отмеченные звездочки.
Ng-show и ng-hide используются для отображения или скрытия отмеченного или непроверенного символа звездочки. Здесь щелчок используется для управления значением переменной, которая, в свою очередь, показывает отмеченный символ звездочки.

Синтаксис:

 <button ng-click = "[ФУНКЦИОНАЛЬНЫЙ ВЫЗОВ]> Щелкните! <button>
<span ng-show = "[Логическое выражение]> Элемент </ span>

Пример:

<!DOCTYPE html>
< html >
< head >
< title >Angular Span element on click</ title >
< script src =
</ script >
< link rel = "stylesheet" href =
< style >
.checked {
color: orange;
}
.rateButton {
border-radius: 12px;
background-color: goldenrod;
}
</ style >
</ head >
< body >
< 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 >

Выход:
Перед нажатием:

После 3 кликов:

Подход 2: этот пример показывает, как часть текста может быть скрыта с помощью span и ng-if для выборочных зрителей (здесь, кто знает пароль 12345). Здесь событие щелчка выполняется с использованием техники привязки событий angular. Используемый тип привязки события называется привязкой к целевому событию. NgForm используется для запуска функций с использованием метода привязки событий. В этом методе событие заключено в круглые скобки (), а имя события - это тип кнопки, которая предназначена для его создания.

Синтаксис:

 <form (nameOfEventBinder) = "Вызов функции"> </ form> 
<button type = "nameOfEventBinder"> Нажмите! <кнопка>
<span ng-if = "[Логическое выражение]> Элемент </ span>

Пример: файл test.html:

< 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 >

файл test.css:

. hidden {
font-weight : bold ;
}
. show {
color : green ;
}
.error{
color : red ;
}

файл test.ts:

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;
}
}

Выход:
Изначально:

После ввода правильного пароля, например, 12345:

После неправильного пароля: