【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。

参考资料：

angularjs中文网：http://www.apjs.net/

angularjs官网：http://angularjs.org

api参考：http://docs.angularjs.cn/api/ng/directive/form

（之所以列出如上这些链接，是因为本人在学习各类语言的过程中，发现入门以后，通过看官方文档，反倒会学习的更快，更准确，更系统。）

从jquery转向angularJs这种双向绑定的js框架时，最让人担忧的是原来处理dom的方式在使用angularJs后，应该怎么适应呢？

本文列出了比较常见的几种处理，包括表单验证，动态设置元素样式，设置元素显示隐藏等功能。

1. input[checkbox]双选框

使用方法：

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

  opacity:;

  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>

目前我了解到，有不少人使用Angular+ionic开发html5版本的app。
更多细节可以参考网站http://www.ionic.wang/start-index.html

另外，还有免费教程： http://www.ionic.wang/course-index.html

推荐的网站：
http://docs.angularjs.cn/api/ (api文档)
http://showcase.ngnice.com/#/home/home （常用实例）
http://docs.ngnice.com/guide/expression （开发文档）