使用AngularJS在JSON URL中显示数据

时间:2014-10-02 07:31:56

标签: javascript json angularjs ionic-framework

我是离子/ angularjs的新手,我需要知道如何从Json网址向HTML视图显示数据。

因此,我的Json URL中的数据如下所示:

{
  News: [
        {
          id: "1",
          title: " It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
          image: "uploads/news/fortunaglobal_logo.jpg",
          status: "yes"
        },
        {
          id: "2",
          title: "fgdf",
          description: "hhjgh",
          image: "uploads/news/16613_10204428208286459_7484489390034618482_n.jpg",
          status: "yes"
        }
      ]
}

我在我的剧本中试过这个:

.controller('NewsCtrl', function($scope, $http) {   

        $http.get('    "JSON URL"   ')
           .success(function(response, status, headers, config){

              window.alert('came in');
              if(status==200){

                 $scope.news = response.data['News'];
                 window.alert($scope.news );

              } else {
                 window.alert('No internet Connection');
              }
              console.log(news);
           })
          .error(function(data,status,headers,config){
              window.alert('error '+data+status);
              console.log(data);
              console.log(status);
         });
})

这在我的html页面中

<ion-view title="News" ng-controller="NewsCtrl">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>


    <ion-content  class="has-header" scroll="true" padding="true">




    <ul ng-repeat="newsS in news">
      <li>{{newsS.title}}</li>
    </ul>


    </ion-content>
</ion-view>

有人可以向我解释我做错了吗?

1 个答案:

答案 0 :(得分:3)

由于你不够具体,我只能猜出你想要的东西,但我看到一些可能有问题的东西:

$scope.news = response.data['News'];

如果您描述的JSON是完整响应,则此数据应直接包含在您的响应元素中(根据角度文档实际上应该将其命名为数据)。

所以试试这个:

$scope.news = response.News;

接下来无法工作的是

console.log(news);

您的变量news未定义,也许您打算使用$scope.news