如何显示在AngularJS中单击的每一行的span元素？

跨度元素用于对文档中的行内元素进行分组。它可用于挂钩文档的特定部分，该部分可能会根据DOM事件执行特定的操作。
span元素可用于基于函数突出显示，显示，隐藏或对其执行任何特定操作。
Angular提供了几个指令，通过它们可以轻松地操作span元素。以下是一些示例：

方法1：这是提供HTML代码的基本评分。在此，span元素是选中和选中的星形符号。
ng-show和ng-hide用于显示或隐藏选中或未选中的星形符号。此处的单击用于操纵变量的值，该变量又显示选中的星号。

句法：

 The element < /span>

例子：

  

    Angular Span element on click
    
    
    
    
        .checked {
            color: orange;
        }
          
        .rateButton {
            border-radius: 12px;
            background-color: goldenrod;
        }
    

  

    
        
            
                
                
  
                
  
                                
                            
                        Rate Product
                    
                  
                    
                  
  
                    
                  
                    
                  
  
                    
                  
                    
                  
  
                    
                  
                    
                  
  
                    
                  
                    
                  
  
                                 
                                    
                                      Click
                                  
                                
            
  
        
            var app= angular.module("mainApp", []);
            app.controller('RatingController', function($scope){
                $scope.rating=0;
                $scope.Rating=function(){
                    $scope.rating++; 
                };
            });
        
    

输出：
点击之前：

3次点击后：

方法2：此示例说明了如何使用span和ng-if隐藏选择性查看者(此处知道密码为12345)的部分文本。这里的click事件是使用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
           
        

             Enter password to reveal text
            
            

                
                 submit
                
                 reset
                
            
        

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)后：

输入错误密码后：