发表于: 2017-05-23 23:13:11

1 1148


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

AngularJS中ng-if 和ng-show 的区别

AngularJS 自定义指令的使用方法

AngularJS中表单验证的自定义验证

明天计划的事情:(一定要写非常细致的内容) 

1.日期用bs插件 

2.自定义每页显示数据的条数 

3.分页按钮的显示 


遇到的问题:(遇到什么困难,怎么解决的)


item.id获取到的是返回数据的id,而$index+1则是自定义id

<tr ng-repeat="item in articleData track by $index">
   <td>{{$index+1}}</td>
   <!--{{item.id}}-->
   <td>{{item.title}}</td>
   <td>{{item.type|pageTypeFilter}}</td>
   <td>{{item.createAt|timeFilter}}</td>
   <td>{{item.updateAt|timeFilter}}</td>
   <td>{{item.author }}</td>
   <td>{{item.status|statusFilter}}</td>

   <td>
       <class="btn btn-sm" ng-click="editStatus(item.id,item.status)">
           {{item.status|articleStatusChangeFilter}}
       </a>
       <!--<a class="btn btn-sm" ng-click="editData(item.id)">编辑</a>-->
       <class="btn btn-sm" ui-sref="home.articleDetail({id:item.id})"></a>
       <class="btn btn-sm" ng-click="deleteId(item.id)">删除</a>
   </td>
</tr>

收获:(通过今天的学习,学到了什么知识)

将表单验证从ng-if更换到ng-show,使得表单验证能够实时验证数据

注意:ng-show 验证与input输入框的name属性值绑定,而不是ng-model


<input type="text" name="name" placeholder="请输入账号ng-model='name' maxlength=16 pattern="^[A-Za-z\d]+$" ng-minlength=required>

<div class="remind" ng-show="loginForm.name.$dirty && loginForm.name.$invalid">
   <ng-show="loginForm.name.$error.required">用户名是必须的。</p>
   <ng-show="loginForm.name.$error.minlength">用户名最少5位。</p>
   <ng-show="loginForm.name.$error.pattern">账号为英文字母或数字</p>
</div>
 

<div class="input">
   <img src="images/password.png">
   <input type="password" name="pwd" ng-model='pwd' placeholder="请输入密码ng-minlength=maxlength=20  required>
</div>
<div class="remind" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
   <ng-show="loginForm.pwd.$error.required">用户名是必须的。</p>
   <ng-show="loginForm.pwd.$error.minlength">用户名最少6位。</p>
</div>
<class="warning"></p>

<button class="login-btn" ng-click="login()"
       ng-disabled="loginForm.name.$dirty && loginForm.name.$invalid ||loginForm.pwd.$dirty && loginForm.pwd.$invalid">
   登录
</button>



返回列表 返回列表
评论

    分享到