AngularJS ng类指令用法详细介绍

2021年3月17日15:10:49 发表评论 41 次浏览

ng级指令AngularJS中, 用于指定HTML元素上的CSS类。它用于动态绑定HTML元素上的类。如果ng-class指令中的表达式返回true, 则仅添加该类, 否则不添加。所有HTML元素都支持它。

语法如下:

<element ng-class="expression"> Contents... </element>

范例1:本示例使用ng-class指令设置和重置CSS类。

<!DOCTYPE html>
< html >
      
< head >
     < title >ng-class Directive</ title >
      
     < script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" >
     </ script >
  
     < style >
         .edit {
             color: green;
             font-size: 1.5em;
         }
     </ style >
</ head >
  
< body ng-app = "" style = "text-align:center" >
      
     < h1 style = "color:green" >lsbin</ h1 >
     < h2 >ng-class Directive</ h2 >
  
     < div >
         < input type = "button" ng-click = "edit=true" value = "Style" />
         < input type = "button" ng-click = "edit=false" value = "Reset" />
          
         < br >< br >
          
         < span ng-class = "{true:'edit'}[edit]" >
             lsbin
         </ span > 
         is the computer science portal for geeks.
     </ div >
</ body >
  
</ html >

输出如下:

单击按钮之前:

ngclass

单击样式按钮后:

ngclass

范例2:本示例使用ng-class指令将CSS样式设置为该类。

<!DOCTYPE html>
< html >
      
< head >
     < title >ng-class Directive</ title >
      
     < script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js" >
     </ script >
      
     < style type = "text/css" >
         .index {
             color: white;
             background-color: green;
         }
     </ style >
</ head >
  
< body ng-app = "app" style = "padding:20px" >
      
     < h1 style = "color:green" >lsbin</ h1 >
     < h2 >ng-class Directive</ h2 >
  
     < div ng-controller = "geek" >
         < table >
             < thead >
                 < th >Select any sorting technique:</ th >
                 < tr ng-repeat = "i in sort" >
                     < td ng-class = "{index:$index==row}" 
                             ng-click = "sel($index)" >
                         {{i.name}}
                     </ td >
                 </ tr >
             </ thead >
         </ table >
     </ div >
      
     < script >
         var app = angular.module("app", []);
          
         app.controller('geek', ['$scope', function ($scope) {
             $scope.sort = [
                 { name: "Merge sort" }, { name: "Quick sort" }, { name: "Bubble sort" }
             ];
             $scope.sel = function (index) {
                 $scope.row = index;
             };
         }]);
     </ script >
</ body >
  
</ html >

输出如下:

选择元素之前:

ngclass

选择元素后:

ngclass

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: