完全是Ionic和Angular的新手，需要外部json请求的建议

Complete New to Ionic and Angular, need advice with external json request

本文关键字：外部 json 请求 新手 Ionic Angular      更新时间：2023-09-26

我刚从离子开始，我知道这可能非常简单。我一直在阅读如何使用离子和角，但还没能解决这个简单的小任务。

我只是想简单地从外部文件拉json。我仍在阅读文档，但还不能设法弄清楚如何做到这一点。

http://codepen.io/anon/pen/wKwxpX 

    var myApp = angular.module('myApp', ['ionic']);
    myApp.controller('MainCtrl', function() {
    //instead of hard coded json, I need to get json from an external source here
    this.items = [
        {title: "Item 1"},
        {title: "Item 2"},
        {title: "Item 3"},
        {title: "Item 4"},
        {title: "Item 5"},
     ]
  for (var i = 0; i < 1000; i++)
        this.items.push(i);
});

您可以使用$http调用为外部ajax和内部成功调用绑定结果到$scope变量。

您还需要在"双引号包装标题，使其有效json像"title"

标记 

<body ng-controller="MainCtrl as main">
  <ion-header-bar class="bar-positive">
    <h1 class="title">1000 Items</h1>
  </ion-header-bar>
  <ion-content>
    <ion-list>
      <ion-item collection-repeat="item in main.items">
        {{item.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</body>
控制器

var myApp = angular.module('myApp', ['ionic']);
myApp.controller('MainCtrl', function($http) {
  var main = this
  $http.get('data.json').success(function(data){
      main.items = data;
  })
});

数据。JSON 

[{
  "title": "Item 1"
}, {
  "title": "Item 2"
}, {
  "title": "Item 3"
}, {
  "title": "Item 4"
}, {
  "title": "Item 5"
}]

演示Plunkr

相关文章：