Javascript 使用 AngularJS 从 IONIC 中的 json 文件中获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31901949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting data from a json file in IONIC using AngularJS
提问by Widad
Problem
问题
I created my first project with ionic framework using ionic tabs template and this is an example of the project : (https://github.com/driftyco/ionic-starter-tabs) As we see in this project we get a list of friends and a friend detail from an array list created in the services.js file, but I want to get this list and items detail from a json file like this(example https://friends.json).
我使用 ionic tabs 模板创建了我的第一个带有 ionic 框架的项目，这是该项目的一个示例：( https://github.com/driftyco/ionic-starter-tabs) 正如我们在这个项目中看到的，我们得到了一个朋友列表以及在 services.js 文件中创建的数组列表中的朋友详细信息，但我想从这样的 json 文件中获取此列表和项目详细信息（例如 https://friends.json）。
Question
题
How can I Pull JSON data from a web server down to my app??
如何将 JSON 数据从 Web 服务器拉到我的应用程序中？
回答by Joe Lloyd
Factory in services.js
services.js 中的工厂
Start off with a factory but replace my url wit yours.
从工厂开始，但用你的替换我的网址。
.factory('Friends', function ($http, $rootScope, $stateParams) {
return {
all: function () {
return $http.get('https://friends.json/all', { params: { user_id: $rootScope.session } })
},
get: function () {
return $http.get('https://friends.json/getOne', { params: { user_id: $rootScope.session, chat_id: $stateParams.idchat } })
},
add: function (id) {
return $http.get('https://friends.json/new', { params: {idfriends:id}})
}
};
});
Controller in controllers.js
在controllers.js 中的控制器
Then make a controller like this. This is when you instantiate the factory to get your data.
然后制作一个这样的控制器。这是您实例化工厂以获取数据的时间。
.controller('FirendsCtrl', function ($scope, Friends) {
Friends.all().success(function (response) {
$scope.friends = response;
})
})
Scope added to View
添加到视图的范围
This will bind the data to the scope. And there for make it available to the view.
这会将数据绑定到作用域。并在那里使其可用于视图。
Finally you will be able to bring the data to the view via $scope I have created a list here of all the friends that you get from get friend with a nice side swip to add more or delete.
最后，您将能够通过 $scope 将数据带到视图中 我在这里创建了一个列表，其中列出了您从中获得的所有朋友，并通过一个不错的侧面滑动来添加或删除。
<ion-view view-title="Contacts">
<ion-content>
<ion-list>
<ion-item class="item-icon-right" ng-repeat="data in friends">
<h1>{{ data.username }}</h1>
<p>{{ data.friendNumber}}</p>
<i class="icon ion-chevron-left icon-accessory"></i>
<ion-option-button class="button-positive" ng-click="viewFriend(viewFriend(data.idfriends))">View Friend</ion-option-button>
<ion-option-button class="button-assertive" ng-click="deleteFriend(remove(data.idfriends))">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Disclaimer
免责声明
this is some code that I had previously written, I've modified it a bit to fit with your question. I have not ran this version exactly but my full version works fine.
这是我以前编写的一些代码，我对其进行了一些修改以适应您的问题。我还没有完全运行这个版本，但我的完整版本运行良好。
if you wish to see the full code please feel free to check out my github repo https://github.com/joeLloyd/Scripto5000
如果您想查看完整代码，请随时查看我的 github 仓库https://github.com/joeLloyd/Scripto5000
