8.AngularJS 中的select与表格
(一)使用数组作为数据源
1、item表示数组中的每一项
2、循环出的option中,value的值,默认为item
3、option显示出的内容(<option></option>标签中的文字)是由item.site for决定的!
(二)以对象作为数据源
1、(key,value)第一项表示对象的键,第二项表示对象的值;
2、option的value,永远都是对象的值!
3、option显示出的内容(<option></option>标签中的文字)是由...for决定的!也就是说,for前面是什么,option标签中就是什么。
ng-options 和 ng-repeat
1、ng-options使用时,是将指令添加在select上;
ng-repeat使用时,是将指令添加在option上。
2、ng-options使用时,必须同步给select标签绑定ng-model;
ng-repeat使用时,不一定需要绑定ng-model;
3、ng-options使用时,我们只需要关心for前面的部分,即option标签中显示的文字;而option的value会自动分配,不由我们决定。
(使用数组作为数据源时,value就是数组的每一项;使用对象作为数据源时,value永远都是对象的值)
ng-repeat使用时,除了要指定option标签中显示的文字,
还需要手动指定value中的内容,如果没有指定,则默认没有value;
10.AngularJS中的表单和输入验证
1、表单中,常用的验证操作:
valid 字段内容合法的
pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时,必须给form和input,设置name属性。
给form和input设置name后,会自动将表单信息绑定到验证操作 得到验证结果。
例如:
formName.inputName.invalid = "true"; 表示表单输入内容不合法!
formName.inputName.$error.required = "true"; 表示设置了必填,但是没有输入!
注意:
$error支持的验证:required/minlength/maxlength/partten/eamil/num/date/rul等
3、为了避免AngularJS的验证与HTML5的表单验证冲突!!比如说 type="email" required等,H5也会进行验证,那么可以给form添加"novalidate"属性,禁用HTML5的验证功能。
11.AngularJS中的动画
在AngularJS中使用动画:
1、导入angular-animate.js
2、如果页面中没有自定义的app模块,则可以直接绑定系统模块ng-app="ngAnimate"
如果页面中有自定义的app模块,则可以在自定义模块的数组中,注入ngAnimate。
angular.module
3、当使用ng-show、ng-hide显示或者隐藏元素的时候,系统会自动添加或者移除,ng-hide这个class类。
4、当使用ng-if/ng-switch/ng-repeat等其他指令,需要分别设置显示后和隐藏后的两种class样式;
显示后的class: .ng-enter-active,.ng-leave{}
显示后的class: .ng-enter,.ng-leave-active{}
13.AngularJS模板
- AngularJS国际化