Замена статических данных 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, время: 10:26. |