Как показать элемент диапазона для каждой строки, нажатой в AngularJS?
Элемент 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:
После неправильного пароля: