如何在 Web api 中使用 angular ng-repeat？

Question

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

'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>

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

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

Answer 1

模板中缺少 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>

Answer 2

你的代码没有任何问题

<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 在 Web 控制台中打印您的 res.data 以确认。

如何在 Web api 中使用 angular ng-repeat？

How to use angular ng-repeat with an Web api?

html

javascript

angularjs

webapi