极客教程如何在AngularJS中为每个点击的行显示一个span元素
在这篇文章中，我们将看到如何在AngularJS中为每一行的点击显示一个span元素。span元素是用来在文档中分组的内联元素。它可以用来对文档的特定部分进行挂钩，该部分可能受到基于DOM事件的特定操作。span元素可以用来突出显示，显示，隐藏或基于一个函数做任何特定的动作。Angular提供了几个指令，通过这些指令可以很容易地操纵span元素。下面给出了一些例子。
方法1：这是一个基本的给予评级的HTML代码。这里的span元素是选中和未选中的星形符号。ng-show和ng-hide用于显示或隐藏选中或未选中的明星符号。在这里，点击被用来操作一个变量的值，而这个变量又会显示选中的星形符号。
语法:
<button ng-click="[A FUNCTION CALL] >
Click!
< button>
<span ng-show="[An boolean Expression] >
The element
< /span>
例子1：在这个例子中，每点击一行的span元素都将在AngularJS中显示。
<!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>
输出:
方法2：这个例子展示了如何使用span和ng-if来隐藏部分文本，以满足有选择的浏览者（这里谁知道密码是12345）。这里的点击事件是使用angular的事件绑定技术完成的。使用的事件绑定类型被称为目标事件绑定。NgForm被用来触发使用事件绑定技术的功能。在这种技术中，事件被绑定在括号（）中，事件的名称是要创建的按钮的类型。
语法:
<form (nameOfEventBinder)="Function Call"> </form>
<button type="nameOfEventBinder"> Click! <button>
<span ng-if="[An boolean Expression]> The element </span>
例子2：在这个例子中，包含密码字段的表单，使用了隐藏的文本数据，将根据输入的数据来呈现。
<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;
}
}
输出：从下面的输出中，最初，将显示的文本是 “文本在这里被隐藏”。当输入正确的密码即12345时，它将以绿色显示 “这是隐藏的文本！！”，而当输入的密码不正确时，它将以红色显示 “错误的密码”。
