Question

问题

我使用离子选项卡模板创建了第一个带离子框架的项目，这是项目的一个示例：（https://github.com/driftyco/ionic-starter-tabs）正如我们在这个项目中看到的那样，我们从services.js文件中创建的数组列表中获取了朋友列表和朋友详细信息，但是我希望从这样的json文件中获取此列表和项目详细信息（示例{{3} }）。

问题

如何将JSON数据从Web服务器下拉到我的应用程序？

Answer 1

在services.js工厂

从工厂开始，但更换我的网址。

.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.js中的控制器

然后制作一个像这样的控制器。这是当您实例化工厂以获取数据时。

.controller('FirendsCtrl', function ($scope, Friends) {

  Friends.all().success(function (response) {
    $scope.friends = response;
  })
})

范围已添加到视图

这会将数据绑定到范围。并且可以将其提供给视图。

最后，您将能够通过$ 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>

<强>声明

这是我之前写过的一些代码，我已经修改了一下以适应你的问题。我没有完全运行这个版本，但我的完整版本工作正常。

如果您希望查看完整代码，请随时查看我的github回购https://github.com/joeLloyd/Scripto5000

使用AngularJS从IONIC中的json文件获取数据

1 个答案: