发表于: 2017-05-11 23:54:50

0 794


今天完成的事情:

今天完成了任务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>



返回列表 返回列表
评论

    分享到