发表于: 2017-05-11 23:54:50
0 795
今天完成的事情:
今天完成了任务7的剩余内容,使用$http获取列表页接口数据,并使用ng-repeat将数据渲染到页面上,
其间还遵照约定利用自定义过滤器filter把请求到的数据从0、1、2、3转换为响应的内容。
看书学习了ui-router的内容。
明天计划的事情:
继续做任务8,任务8的内容很多,有分页、有搜索、有路由。听雪峰说任务8是个坎儿,要认真对待。
遇到的问题:
还是会犯各种没引入js文件或者注入模块的错误,AngularJS经常需要引入各种模块,
第一部先写script标签引入相应的文件这点一定要记牢。
收获:
学习了如何把请求到的数据渲染到页面上,
app.controller('mainCtrl',function ($scope,$http) {
$http({
method: 'get',
url: '/carrots-admin-ajax/a/article/search',
headers: {'Content-Type': 'application/json'}
}).success(function(Data) {
$scope.list = Data.data.articleList;
console.info(Data);
for(i=0;i < $scope.list.length;i) {
$scope.list[i].order= ++i;
}
});
});
其中Data就是请求到的数据,使用console.info将其打印出来后可以发现我们需要的数据在Data.data.articleList中。order是列表页中的ID,这个for循环语句需要放在controller的大括号中才会生效。
html文件中repeat的用法则是
<tbody>
<tr ng-repeat="x in list">
<td>{{x.order}}</td>
<td>{{x.title}}</td>
<td>{{x.type|typeFilter}}</td>
<td>{{x.createAt|date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>{{x.updateAt|date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>{{x.author}}</td>
<td>{{x.status|statusFilter}}</td>
<td>下线 编辑 删除</td>
</tr>
</tbody>
评论