如何将角度 ng-repeat 与 Web api 一起使用？答案

【问题标题】：How to use angular ng-repeat with an Web api?如何将角度 ng-repeat 与 Web api 一起使用？
【发布时间】：2020-01-27 07:16:47
【问题描述】：

我正在尝试使用前端 html 构建网站并从 Web-api 获取其数据。我的 Web-api 返回一个 json 格式。所以我试图使用 Angular $http 和 ng-repeat 指令来使用 Get 请求。我的角度控制器是这样的-

'use strict';  app.controller('blogsController', ['$scope','$http', function ($scope, $http) {
$http.get('www.example.com/api/blog')
   .then(function(res){
      $scope.blogs = res.data;
    });
}]);

html 代码如下所示 -

<body app="ng-app" >
   <div ng-repeat="xr in blogs" >
     <div id="blog_title" >
       {{xr.blog_title}}
     </div>

     <div id="blog_text">
       {{xr.blog_text}}
     </div>
   </div>

</body>

我已经尝试过了，但这并没有从博客 Web api 中获取数据。

请帮我解决问题.....

【问题讨论】：

标签： javascript html angularjs webapi

【解决方案1】：

你的代码没有错

<div ng-repeat="xr in blogs" >
     <div id="blog_title" >
       {{xr.blog_title}}
     </div>

     <div id="blog_text">
       {{xr.blog_text}}
     </div>
   </div>

但请确保您的res.data 必须遵循如下安排：

res.data = [{'blog_title': 'title value1', 'blog_text':'text value'}
            {'blog_title': 'title value2', 'blog_text':'text value'}
            {'blog_title': 'title value3', 'blog_text':'text value'}]

使用console.log 在网络控制台中打印您的res.data 以确认。

【讨论】：

【解决方案2】：

模板上缺少 ng-controller，app 应该是 ng-app

<body ng-app="ng-app" ng-controller="blogsController">
   <div ng-repeat="xr in blogs" >
     <div id="blog_title" >
       {{xr.blog_title}}
     </div>

     <div id="blog_text">
       {{xr.blog_text}}
     </div>
   </div>

</body>

【讨论】：

我已经添加了 ng-controller 但仍然无法正常工作。