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

我使用WordPress API作为AngularJS/Ionic应用程序的数据服务。我有一个职位类型调用的程序，并有计划（职位）的列表和JSON的样子：AngularJS和WordPress API显示来自单个帖子的数据

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];但问题是，例如，如果我点击第一个“A邮报”则返回从程序ID 6但这并不匹配0对象的索引。

当ID和索引不匹配而无需手动重置数据库中的程序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>

来源

2016-04-25 lukeliasi

可以在程序使用简单的循环阵列查找特定单程序。请参阅以下功能的修改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'; 
       }); 
     }

来源

2016-04-29 10:16:48

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

回答

相关问题