发表于: 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>
<a 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>-->
<a class="btn btn-sm" ui-sref="home.articleDetail({id:item.id})"></a>
<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=5 required>
<div class="remind" ng-show="loginForm.name.$dirty && loginForm.name.$invalid">
<p ng-show="loginForm.name.$error.required">用户名是必须的。</p>
<p ng-show="loginForm.name.$error.minlength">用户名最少5位。</p>
<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=6 maxlength=20 required>
</div>
<div class="remind" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<p ng-show="loginForm.pwd.$error.required">用户名是必须的。</p>
<p ng-show="loginForm.pwd.$error.minlength">用户名最少6位。</p>
</div>
<p 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>
评论