发表于: 2017-06-05 23:17:29
1 1256
1、任务7审题,
对登录页的两个input框添加ng-model进行双向绑定,为整个登录页的form表单添加验证功能:实现输入时进行动态校验。看了教程,大概思路已经有了,代码编辑中。
提示1:
<p class="tip1"
ng-if="signUpForm.name.$error.required&& //AngularJS直接使用ng-if进行判定,第一个条件为必填项报错
signUp.username.$touched">用户名不能为空</p> //第二个为需点击过文本框,同时满足时进行弹窗提示
提示2:
ng-if="(signUpForm.username.$error.minlength|| //input内设置的最小长度报错
signUpForm.username.$error.maxlength )&& //或者最大长度报错
signUpForm.username.$touched">用户名长度不合法</p>
对登录页的button添加ng-click事件,当点击时,获取双向绑定后的数据,并用$http请求登录接口:差不多同任务5,使用$http的方式完成传参和验证并跳转。
获取列表页接口数据,通过ng-repeat等方法将数据渲染到页面上:请求地址:post /a/u/article请求参数大概看了下,怎么获取数据好像在哪里看到过,明天再研究。
2、慕课网教程,表单验证(讲的很详细,表单验证的方法基本都涉及了,推荐阅读)
直接放网址:http://www.imooc.com/learn/505
功能确实很强大,纯AngularJS实现表单数据的双向绑定验证。
3、介绍了一个字体样式库:Font Awesome,官网http://www.fontawesome.com.cn/,百度静态资源公共库也有地址,很多常用的图标都可以在上面找到,比如任务经常用到的:
如果直接用输入法自带比如“>”效果太差,切图使用又非常影响效率。使用方法:
<i class="fa fa-camera-retro fa-5x"> //前面类名找到图标,后面大小,很方便。
收获:虽然只是初步看了表单验证,仍然能感觉到AngularJS的强大,比纯JS或者JQ都要简洁便利很多,值得后面深入研究提升效率。
计划:明天完成表单验证,试着获取接口参数并ng-repeat到网页结构。
评论