Question

我正在尝试自动刷新使用Ionic 1显示的列表。我找到了这支笔但却无法理解它是如何工作的。

https://codepen.io/calendee/pen/GkgsD?editors=1111

下面的代码给出了我要刷新的列表

<ion-content ng-controller="myController" ng-init="init()">
          <div class="list">
             <a ng-repeat="entry in entries" class="item" ng-click="browse(entry.link)">
               <b>{{entry.title}}</b><br>
               <span ng-bind-html="entry.contentSnippet"></span>

             </a>

          </div>
      </ion-content>

$ http.get（＆＃34; http://ajax.googleapis.com/ajax/services/feed/load＆＃34;，{ 参数：{＆＃34; v＆＃34;：＆＃34; 1.0＆＃34;，＆＃34; q＆＃34;：＆＃34; https://community.woltlab.com/board-feed/?l=2＆＃34;，＆＃34; num＆＃34;：＆＃34; 100＆＃34; }}）

app.js

var rssApp = angular.module('myApp1', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

rssApp.controller("myController", function($http, $scope) {

    $scope.init = function() {
        $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "https://community.woltlab.com/board-feed/?l=2", "num": "100" } })
            .success(function(data) {
                $scope.rssTitle = data.responseData.feed.title;
                $scope.rssUrl = data.responseData.feed.feedUrl;
                $scope.rssSiteUrl = data.responseData.feed.link;
                $scope.entries = data.responseData.feed.entries;
                window.localStorage["entries"] = JSON.stringify(data.responseData.feed.entries);
            })
            .error(function(data) {
                console.log("ERROR: " + data);
                if(window.localStorage["entries"] !== undefined) {
                    $scope.entries = JSON.parse(window.localStorage["entries"]);
                }
            });
    }

        $scope.browse = function(v) {
        window.open(v, "_blank", "location=no");
    } 
});

Answer 1

你需要在一段时间后刷新数据.Angular有$ interval服务，它会在指定的时间后回调函数。这里有plunker https://plnkr.co/edit/KB9das?p=info

$interval(function() {
reloadNumber++;
console.log('refreshed nth times ', reloadNumber)
$scope.getPosts();

}，5000）;

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http, $interval) {
  $scope.name = 'World';


  var root = 'https://jsonplaceholder.typicode.com';
  var reloadNumber = 0;
  $scope.getPosts = function() {
    $http({
      url: root + '/posts',
      method: 'GET'
    }).then(function(data) {
      $scope.posts = data.data;
      console.log(data);
    });
  }
  $scope.getPosts();
  $interval(function() {
    reloadNumber++;
    console.log('refreshed nth times ', reloadNumber)
    $scope.getPosts();

  }, 5000);

});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  
  <table class="table">
    <thead>
    <th>
      USERID

    </th>
    <th>
      TITLE

    </th>
    <th>
      BODY

    </th>
    </thead>
    <tr ng-repeat="post in posts">
      {
      <td>{{post.userId}}

      </td>
      <td>{{post.title}}</td>
      <td>{{post.body}}</td>
    </tr>
  </table>
</body>

</html>

＆＃13;

https://plnkr.co/edit/GgHtCQ?p=preview

Answer 2

 $scope.init = function() {

    $http.get("https://ajax.googleapis.com/ajax/services/feed/load", {
        params: {
          "v": "1.0",
          "q": "https://community.woltlab.com/board-feed/?l=2",
          "num": "100"
        }
      })
      .success(function(data) {
     
       $scope.data = data;
        $scope.rssTitle = data.responseData.feed.title;
        $scope.rssUrl = data.responseData.feed.feedUrl;
        $scope.rssSiteUrl = data.responseData.feed.link;
        $scope.entries = data.responseData.feed.entries;
        window.localStorage["entries"] = JSON.stringify(data.responseData.feed.entries);
      })
      .error(function(data) {
        
         $scope.data = data;
        console.log("ERROR: " + data);
        if (window.localStorage["entries"] !== undefined) {
          $scope.entries = JSON.parse(window.localStorage["entries"]);
        }
      });
  }

  $scope.browse = function(v) {
    window.open(v, "_blank", "location=no");
  }
  $interval(function() {
   $scope.init();
  }, 5000);
});

如何自动刷新离子列表

2 个答案: