Question

我会尝试提供尽可能多的信息。

目前，我已经开始开发一个应用程序，该应用程序将能够通过pull to refresh功能接收最新更新。我已经设置了HTTP-GET，它成功地从JSON文件接收数据并将其加载到我的pull中以进行刷新。目前它只加载一条特定的消息。我如何添加更多，以便它可以通过拉动刷新接收其他通知/消息？我将发布我的应用程序的图片并发布HTML，Javascript代码和JSON文件。如果有人可以帮助我从JSON文件中向我的应用程序添加更多消息或指向我正确的方向我会非常感激！

这是我的应用程序在拉下刷新来加载JSON文件中的信息时的样子。

这是我的JSON文件。我不明白如何将ExampleMessage2加载到我的应用程序中。

{
    "response1": [
        {"announcement_name": "ExampleMessage1"},
        {"date": "26/05/2015"},
        {"message": "ExampleMessage1"}
    ],
    "response2": [
        {"announcement_name": "ExampleMessage2"},
        {"date": "27/05/2015"},
        {"message": "ExampleMessage2"}
    ]
}

这是我的JavaScript文件。这将从webhost接收数据。

.controller('Controller', function($scope, $http) {
    $scope.items = [1,2,3];
    $scope.doRefresh = function() {
        $http.get("")
            .success(function(data) {
                $scope.announcement_name = data.announcement_name;
                $scope.date = data.date;
                $scope.message = data.message;
            })
            .finally(function() {
           // Stop the ion-refresher from spinning
           $scope.$broadcast('scroll.refreshComplete');
         });
      };
    });

最后这是我的HTML文档，它将数据加载到div格式中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Announcement</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="Announcement">
    <ion-view view-title="Announcements">
      <ion-pane>
         <ion-header-bar class="bar-positive">
          <h1 class="title">Pull To Refresh</h1>
        </ion-header-bar>
        <ion-view view-title="Announcements">
        <ion-content ng-controller="Controller">
          <ion-refresher on-refresh="doRefresh()">

          </ion-refresher>
          <ion-list>
            <ion-item ng-repeat="item in items" ng-click="getData()">

            <div class="list card">
              <div class="item item-divider">{{announcement_name}} - {{date}}</div>
              <div class="item item-body">
                <div>
                  {{message}}
                </div>
            </ion-item>
          </ion-list>
        </ion-content>
        </ion-view>
  </body>
</html>

Answer 1

您现在正在做的是在$scope.items上使用包含三个数字元素的ng-repeat。然后，每次迭代时，您都会呈现包含相同值的$scope.announcement_name和$scope.message。

您需要将数据存储在$ scope.items：

中

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

$http.get("http://www.wikicode.co.uk/announcement.json")
  .success(function(data) {
      $scope.items = data;
  });

$scope.doRefresh = function() {
    $http.get("http://www.wikicode.co.uk/announcement.json")
        .success(function(data) {
            $scope.items = data;
        })
        .finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
});

然后在html中你需要获得每个项目的属性（例如{{item.announcement_name}}）：

<body ng-app="Announcement">
<ion-view view-title="Announcements">
  <ion-pane>
     <ion-header-bar class="bar-positive">
      <h1 class="title">Pull To Refresh</h1>
    </ion-header-bar>
    <ion-view view-title="Announcements">
    <ion-content ng-controller="Controller">
      <ion-refresher on-refresh="doRefresh()">

      </ion-refresher>
      <ion-list>
        <ion-item ng-repeat="item in items" ng-click="getData()">

        <div class="list card">
          <div class="item item-divider">{{item.announcement_name}} - {{item.date}}</div>
          <div class="item item-body">
            <div>
              {{item.message}}
            </div>
        </ion-item>
      </ion-list>
    </ion-content>
    </ion-view>

离子：我如何将更多物品装入拉力刷新？

1 个答案: