AngularJS筆記3-- ng-show ng-class

時間 2019-11-09

標籤 angularjs 筆記 class 欄目 AngularJS 简体版

原文原文鏈接

ng-show / ng-hidecss

經過綁定一個布爾型的變量，顯示或隱藏HTML元素。html

當 note.assignee爲 true ( 也能夠是非空字符串·，非0數字，非空JS對象等)時，assignee所對應的span元素可見。jquery

ng-classapp

用於選擇性的從HTML中添加或者刪除CSS class . ng-class指令可接收字符串或對象做爲參數ide

1.參數爲字符串：直接把它做爲CSS class名稱應用到UI中this

2.參數是對象，angularJS會檢查該對象的每個屬性及它所對應的值，根據值是false 仍是true來決定到底添加仍是刪除CSS classspa

本例：參數爲對象，包含兩個屬性：當 note.done爲true時，會添加名爲 done的 css class 並刪除 pending .htm

反之當note.done爲false 時添加pending 刪除done對象

<!DOCTYPE html>
<html ng-app="notesApp">
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script src="js/jquery-3.1.1.min.js"></script>
       <style>
           .done{
               background-color:chocolate; /*巧克力色*/
           }
           .pending{ background-color: aquamarine;}/*藍綠色*/
       </style>
       </head>
   <body ng-controller="MainCtrl as ctrl">
       <div ng-repeat=" note in ctrl.notes" ng-class=" ctrl.getNoteClass(note.done)">ip

<！--第三個爲done屬性，其他爲pending-->
           <span class="label">{{note.label}}</span>
           <span class="assignee"
               ng-show="note.assignee" <！--第一個第四個不爲空-->
               ng-bind="note.assignee"></span>
           <span></span>
       </div>
       <script>
           angular.module('notesApp',[]).controller('MainCtrl',[

           function(){
               var self=this;
               self.notes=[
               {label:'first',done:false,assignee:'Shyam'},
               {label:'second',done:false},
               {label:'third',done:true},
               {label:'last',done:false,assignee:'brad'}];

               self.getNoteClass=function(status){
                   return{ 包含兩個屬性
                       done:status,                        pending: !status                    }                }            }])        </script>    </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。