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

我刚开始使用离子，我知道这可能是非常容易的。我一直在阅读如何使用离子和角度，但一直没有能够把这个简单的小任务。Ionic和Angular全新，需要外部json请求的建议

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

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); 
});

来源

2015-08-28 phpwebdev

你可以使用$http呼叫发出AJAX外部Ajax和导致的$scope变量成功调用bind内。

而且你需要在"双引号来包装标题，使其有效的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; 
    }) 
});

data.JSON

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

Demo Plunkr

来源

2015-08-28 15:44:28

谢谢。我开始了解所有这些如何工作。我倾向于有这样的习惯，不用花时间去阅读基础知识就可以跳入事物。现在我试图做一个角度模糊搜索！一旦我了解更多，我正在从jQuery切换到角 – phpwebdev

保持它..谢谢:) –

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

回答

相关问题