发表于: 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到网页结构。



返回列表 返回列表
评论

    分享到