AngularJs的經常使用的指令介紹

Angular Js的經常使用指令介紹

1.內置指令(前綴爲「ng」)：

a. Ng-app: 標記和指定了AngularJs腳本做用域；

b. Ng-model: 設置表單的具體的控件與當前做用域的屬性的值的綁定；

  如：<input type="text" ng-model="userName" /><br />

    <span>Hello {{userName}}!</span>

c. Ng-init: 初始化指定內部做用域，較少使用；

   如：<div ng-init=」job=’fighter’」>I’m a/an {{job}}</div>

d. Ng-controller: 在一個DOM元素上指定一個控制器的名稱（即設置數據源）；

e. Ng-form: 用於表單驗證（用於表單中存在多個須要驗證的表單信息）；如：

 <form name="mainForm" novalidate>

  <div ng-form="form1">

 姓名:<input type="text" ng-required="true" ng-model="name"/><br>

證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>

 </div><br>

<div ng-form="form2">

 監護人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>

監護人證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>

</div><button ng-disabled="form1.$invalid && form2.$invalid">submit all</button></form>

    f. Ng-disabled: 用於設置表單中的字段禁用；

  如：<textarea ng-disabled="true">你們好，新人報道！</textarea>

g. Ng-readonly：設置表單是否爲只讀；

  如：<textarea ng-readonly="true">你們好，新人報道！</textarea>

h. Ng-checked: 設置複選框被選中；

  如：   <input type="checkbox" ng-checked="childName" ng-init="childName = true" value={{Name}}>{{Name}}

 i. Ng-selected: 設置下拉框選中某項；

  如：  <select>

            <option ng-repeat="phone in phones" ng-selected="{{phone.current}}" value="{{phone.value}}">

                {{phone.name}}</option>

        </select>

j. Ng-hide / ng-show: 設置html元素隱藏或顯示，並未移除元素；如：

 <div ng-show="1+1 == 2">

    1+1=2
</div>
<div ng-hide="1+1 == 3">
    you can't see me.
</div>

k. Ng-change:   如：

    <input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" />
    <code>{{ calc.result }}</code>

L. Ng-if:  若ng-if中的表達式爲false，則對應的元素整個會從DOM中移除而非隱藏，但審查元素時你能夠看到表達式變成註釋了。

M. Ng-repeat:  用於遍歷集合，給每一個元素生成模板實例；

N. Ng-src: 設置圖片的路徑；

O. Ng-bind: 其實與{{}}的做用是同樣的，都用於數據的綁定；