Замена статических данных JSON на $HTTP запрос в AngularJS
Доброго всем!
Долго уже борюсь с плагином под Ionic, который позволяет использовать директиву свайпа слайдов как табы в Material Design. Никак не получается подружить его с API Wordpress. Знаний в Angular чуть больше 0, поэтому рассчитываю на помощь сообщества. Ссылочка на плагин: https://market.ionicframework.com/plugins/swiped-tab ![]() Рабочий пример: http://play.ionic.io/app/f518c3cb3825 Собственно работает он с JSON данными следующим образом: берет данные из catgs, где name - это табы, а items соответственно содержание табов. Пытался заменить var cats на $http запрос данных API блога на вордпресс, но ничего не вышло, не работает. В логе данные приходят, но табы не формируются. Теперь немного о моей "хотелке": нужно каким-то образом переделать фэктори catgs, чтобы табы формировались из $http запроса к API вордпресс категорий, например:http://demo.wp-api.org/wp-json/wp/v2/categories. А содержание (посты) формировались из другого запроса http://demo.wp-api.org/wp-json/wp/v2/posts?categories=<ID>, где ID это ID категории из первого запроса для табов. Например, посты из категории 1: http://demo.wp-api.org/wp-json/wp/v2/posts?categories=1 Пытался получить хотя бы категории таким образом:
angular.module('starter.services', [])
.factory('catgs', function($http) {
var catgs = null;
return {
all: function() {
if(catgs != null)
return catgs;
$http.get('http://demo.wp-api.org/wp-json/wp/v2/categories/').then(function(res){
catgs = res.data;//
console.log (catgs);
return catgs;
})
},
remove: function(catg) {
catgs.splice(catgs.indexOf(catg), 1);
},
get: function(catgId) {
for (var i = 0; i < catgs.length; i++) {
if (catgs[i].id === parseInt(catgId)) {
return catgs[i];
}
}
return null;
}
};
});
В логе данные есть, но табы не формируются Фух, надеюсь не очень страшно все описал :write: |
kingstakh,
где внешний код, который вызывает метод all? Ну и return поставьте перед $http.get |
Цитата:
Цитата:
.controller('productsCtrl', function ($scope, catgs, $ionicSlideBoxDelegate, $window, $ionicGesture) {
//this array control the loading of pages so if the corresponding key of a slide is 'true', angular can load it's content'
$scope.ready = [];
$scope.catgs = catgs.all();
$scope.$on("$ionicView.afterEnter", function (event, data) {
angular.forEach($scope.catgs, function (value, key)
{
if(key===0)
{
$scope.ready.push(0 + ': ' + true);
}
$scope.ready.push(key + ': ' + false);
});
});
$scope.changeSlide = function (index)
{
$scope.ready.push(index + ': ' + true);
};
})
|
kingstakh,
all: function() {
if(catgs != null) {return Promise.resolve(catgs);}
return $http.get('http://demo.wp-api.org/wp-json/wp/v2/categories/').then(function(res){
catgs = res.data;
console.log (catgs);
return catgs;
})
}
.controller('productsCtrl', function ($scope, catgs, $ionicSlideBoxDelegate, $window, $ionicGesture) {
//this array control the loading of pages so if the corresponding key of a slide is 'true', angular can load it's content'
$scope.ready = [];
$scope.$on("$ionicView.afterEnter", function (event, data) {
catgs.all().then(function(catgs) {
$scope.catgs = catgs;
angular.forEach($scope.catgs, function (value, key)
{
if(key===0) {
$scope.ready.push(0 + ': ' + true);
}
$scope.ready.push(key + ': ' + false);
});
})
});
$scope.changeSlide = function (index)
{
$scope.ready.push(index + ': ' + true);
};
})
|
:thanks: Благодарю, теперь все ок, категории на своих местах. Осталось решить вторую часть вопроса, чтобы отображались записи из каждой категории. Может сможете помочь и здесь?
Идея такая, при смене слайда новый запрос, но уже по другой ссылке http://demo.wp-api.org/wp-json/wp/v2/posts?categories=<ID>, где ID это ID категории из первого запроса для табов. ID получить через index, но тут у меня даже примеров нет, без понятия как это сделать. Понимаю что это надо где-то здесь get: function(catgId) ... |
| Часовой пояс GMT +3, время: 00:17. |