Question

我使用WordPress API作为AngularJS / Ionic应用程序的数据服务。我有一个名为program的帖子类型，有一个程序列表（帖子），JSON看起来像：

var programmes = [
 {
  id: 6,
  title: "A post",
  slug: "a-post"
 },
 {
  id: 7,
  title: "Another post",
  slug: "another-post"
 },
 {
  id: 8,
  title: "Post 123",
  slug: "post-123"
 }
]

我已经获得了使用ngRepeat显示的程序列表。但是，我很难为个别帖子获取数据。

我试图这样做以获取单个程序的数据：var programme = programmes[$stateParams.programmeId];但问题是，例如，如果我点击第一个＆＃34; A post＆＃34;它从程序ID返回6，但这与0对象的索引不匹配。

如果id和index不匹配，如何在不必手动重置数据库中的程序ID的情况下从单个程序获取数据？

到目前为止，这是我的文件：

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.programmes', {
    url: "/programmes",
    views: {
      'menuContent': {
        templateUrl: "templates/programmes.html",
        controller: 'ProgrammesCtrl'
      }
    }
  })

  .state('app.programme', {
    url: "/programmes/:programmeSlug",
    views: {
      'menuContent': {
        templateUrl: "templates/programme.html",
        controller: 'ProgrammeCtrl'
      }
    }
  })
  $urlRouterProvider.otherwise('/app/programmes');
});

data.js

.factory('DataFactory', function($http) {

  var urlBase = 'http://event-app.dev/wp-json/wp/v2';
  var APIdata = {};

  var currentProgramme = null;

  return {
    getProgrammes: function() {
      return $http.get(urlBase + '/programmes');
    }
  }
})

controllers.js

.controller ('ProgrammesCtrl', function ($scope, DataFactory) {
  getProgrammes();
  function getProgrammes() {
    DataFactory.getProgrammes().then(function(response) {  
      $scope.programmes = response.data;
    }, 
    function(error) {
      $scope.status = 'Unable to load data';
    });
  }
})

.controller ('ProgrammeCtrl', function ($scope, $stateParams, DataFactory) {
  getProgrammes();
  function getProgrammes() {
    DataFactory.getProgrammes().then(function(response, id) { 
      var programmes = response.data;
      $scope.programme = programmes[$stateParams.programmeId];

    }, 
    function(error) {
      $scope.status = 'Unable to load data';
    });
  }
})

programme.html（查看以显示单个程序）

<ion-view view-title="{{programme.title}}">
  <ion-content>
    <ion-list>
      <ion-item>
        {{programme.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Answer 1

您可以在程序数组上使用简单循环来查找特定的单个程序。请参阅下面修改后的getProgrammes()函数：

 function getProgrammes() {
            DataFactory.getProgrammes().then(function (response, id) {
                    var programmes = response.data;
                    for (var i = 0; i < programmes.length; i++) {
                        if (programmes[i].id == $stateParams.programmeId) {
                            $scope.programme = programmes[i];
                            break;
                        }
                    }
                },
                function (error) {
                    $scope.status = 'Unable to load data';
                });
        }

AngularJS和WordPress API显示来自单个帖子

1 个答案: