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: 其实与{{}}的作用是一样的，都用于数据的绑定；