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