📜  如何为在 AngularJS 中单击的每一行显示一个跨度元素?

📅  最后修改于: 2021-11-10 04:10:50             🧑  作者: Mango

span 元素用于对文档中的行内元素进行分组。它可用于对文档的特定部分进行挂钩,该部分可能会受到基于 DOM 事件的特定操作的影响。
span 元素可用于基于函数突出显示、显示、隐藏或对其执行任何特定操作。
Angular 提供了几个指令,通过这些指令可以轻松操作 span 元素。下面给出了一些示例:

方法 1:这是给出 HTML 代码的基本评级。这里的span元素是checked和checked星形符号。
ng-show 和 ng-hide 用于显示或隐藏选中或未选中的星号。此处单击用于操作变量的值,该值依次显示选中的星形符号。

句法:

例子:



  

    Angular Span element on click
    
    
    

  

    
                                                                                                                                                                     
Rate Product                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
            
                

输出:
点击前:

点击 3 次后:

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

示例: test.html 文件:


    
        
    
    
        
    
The Hidden text is:                             text is hidden here                                              This is the hidden text!!                                                     Wrong Password                     
                         
                                                               
        

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

密码错误后: