【js類庫AngularJs】學習angularJs的指令（包括常見表單驗證，隱藏等功能）

時間 2019-11-20

標籤 js類庫AngularJs 學習 angularjs 指令包括常見表單驗證隱藏功能欄目 AngularJS 简体版

原文原文鏈接

【js類庫AngularJs】學習angularJs的指令（包括常見表單驗證，隱藏等功能）

AngularJS誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入、等等。css

參考資料：html

angularjs中文網：http://www.apjs.net/前端

angularjs官網：http://angularjs.orghtml5

api參考：http://docs.angularjs.cn/api/ng/directive/formjquery

（之因此列出如上這些連接，是由於本人在學習各種語言的過程當中，發現入門之後，經過看官方文檔，反倒會學習的更快，更準確，更系統。）angularjs

從jquery轉向angularJs這種雙向綁定的js框架時，最讓人擔心的是原來處理dom的方式在使用angularJs後，應該怎麼適應呢？express

本文列出了比較常見的幾種處理，包括表單驗證，動態設置元素樣式，設置元素顯示隱藏等功能。api

1. input[checkbox]雙選框

使用方法：app

<input type="checkbox"
       ng-model=""
       [name=""]
       [ng-true-value=""]
       [ng-false-value=""]
       [ng-change=""]>

使用實例：框架

<form name="myForm" ng-controller="ExampleController">
      Value1: <input type="checkbox" ng-model="value1"> <br/>
      Value2: <input type="checkbox" ng-model="value2"
                     ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
      <tt>value1 = {{value1}}</tt><br/>
      <tt>value2 = {{value2}}</tt><br/>
     </form>

js代碼：

 var app = angular.module('formExample', []);
  app.controller('ExampleController', ['$scope', function($scope) {
      console.log('...');
      $scope.value1 = true;
      $scope.value2 = 'YES'
    }]);

頁面效果圖：

2.input[date]時間選擇器

使用方法：

<input type="date"
       ng-model=""
       [name=""]
       [min=""]
       [max=""]
       [required=""]
       [ng-required=""]
       [ng-change=""]>

使用實例：

<form name="dateForm" ng-controller="DateController">
       Pick a date in 2015:
       <input type="date" id="exampleInput" name="input" ng-model="value"
           placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
       <span class="error" ng-show="dateForm.input.$error.required">
           Required!</span>
       <span class="error" ng-show="dateForm.input.$error.date">
           Not a valid date!</span>
        <tt>value = {{value}}</tt><br/>
        <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
        <tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/>
        <tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/>
        <tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/>
        <tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/>
    </form>

js代碼：

function DateController($scope){
    $scope.value = new Date(2015, 9, 22);
  }

效果圖：

3.ng-class 使用angularJs動態設置、更改dom元素的css樣式。

css樣式：

.strike {
  text-decoration: line-through;
}
.bold {
    font-weight: bold;
}
.red {
    color: red;
}

html代碼：

    <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
    <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
    <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
    <input type="checkbox" ng-model="error"> error (apply "red" class)
    <hr>
    <p ng-class="style">Using String Syntax</p>
    <input type="text" ng-model="style" placeholder="Type: bold strike red">
    <hr>
    <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
    <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
    <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
    <input ng-model="style3" placeholder="Type: bold, strike or red"><br>

效果圖：

4.ng-class-odd/even 分別定義奇數偶數元素的css樣式

css樣式：

.odd {
  color: red;
}
.even {
  color: blue;
}

html代碼：

    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
      <li ng-repeat="name in names">
       <span ng-class-odd="'odd'" ng-class-even="'even'">
         {{name}} &nbsp; &nbsp; &nbsp;
       </span>
      </li>
    </ol>

效果圖：

5.ng-click 單擊事件

    <button ng-click="count = count + 1" ng-init="count=0">
      Increment
    </button>
    <span>
      count: {{count}}
    </span>

6.ng-show/hide 是否顯示，或隱藏。angularJs根據這兩個屬性的值，對相應元素增長.ng-hide的樣式

css樣式：

.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

html代碼：

    <span>Click me: </span><input type="checkbox" ng-model="checked"><br/>
    <div>
      Show:
      <div style="background-color:#ccc" ng-show="checked">
        <span> I show up when your checkbox is checked.</span>
      </div>
    </div>
    <div>
      Hide:
      <div style="background-color:#258be3;color:white" ng-hide="checked">
        <span> I hide when your checkbox is checked.</span>
      </div>
    </div>

最後，所有代碼以下，單頁test.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJs directive(指令)</title>
<style>
body{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}
.strike {
  text-decoration: line-through;
}
.bold {
    font-weight: bold;
}
.red {
    color: red;
}
.odd {
  color: red;
}
.even {
  color: blue;
}
.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.2.19/angular.js"></script>
</head>
<body ng-app="formExample">

<h2>AngularJS Sample Application</h2>
<div>
    <h3>input[checkbox]</h3>
    <form name="myForm" ng-controller="ExampleController">
      Value1: <input type="checkbox" ng-model="value1"> <br/>
      Value2: <input type="checkbox" ng-model="value2"
                     ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
      <tt>value1 = {{value1}}</tt><br/>
      <tt>value2 = {{value2}}</tt><br/>
     </form>
</div>

<div>
    <hr>
    <h3>input[date]</h3>
    <form name="dateForm" ng-controller="DateController">
       Pick a date in 2015:
       <input type="date" id="exampleInput" name="input" ng-model="value"
           placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
       <span class="error" ng-show="dateForm.input.$error.required">
           Required!</span>
       <span class="error" ng-show="dateForm.input.$error.date">
           Not a valid date!</span>
        <tt>value = {{value}}</tt><br/>
        <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
        <tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/>
        <tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/>
        <tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/>
        <tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/>
    </form>
</div>
<script>
  var app = angular.module('formExample', []);
  app.controller('ExampleController', ['$scope', function($scope) {
      console.log('...');
      $scope.value1 = true;
      $scope.value2 = 'YES'
    }]); 
  
  /* app.controller('DateController', ['$scope', function($scope) {
    $scope.value = new Date(2015, 9, 22);
    console.log($scope.value);
  }]);*/
  //上下兩種寫法均可以
  function DateController($scope){
    $scope.value = new Date(2015, 9, 22);
  }
</script>
<div>
    <hr>
    <h3>ng-class</h3>
    <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
    <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
    <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
    <input type="checkbox" ng-model="error"> error (apply "red" class)
    <hr>
    <p ng-class="style">Using String Syntax</p>
    <input type="text" ng-model="style" placeholder="Type: bold strike red">
    <hr>
    <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
    <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
    <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
    <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
</div>
<div>
    <hr>
    <h3>ng-class-odd/even</h3>
    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
      <li ng-repeat="name in names">
       <span ng-class-odd="'odd'" ng-class-even="'even'">
         {{name}} &nbsp; &nbsp; &nbsp;
       </span>
      </li>
    </ol>
</div>
<div><hr>
    <h3>ng-click</h3>
    <button ng-click="count = count + 1" ng-init="count=0">
      Increment
    </button>
    <span>
      count: {{count}}
    </span>
</div>
<div><hr>
    <h3>ng-show/hide</h3>
    <span>Click me: </span><input type="checkbox" ng-model="checked"><br/>
    <div>
      Show:
      <div style="background-color:#ccc" ng-show="checked">
        <span> I show up when your checkbox is checked.</span>
      </div>
    </div>
    <div>
      Hide:
      <div style="background-color:#258be3;color:white" ng-hide="checked">
        <span> I hide when your checkbox is checked.</span>
      </div>
    </div>
</div>
<br/>
</body>
</html>