我想将一个值从一个元素传递到另一个 html 页面。
非常简单 - 我想单击一个对象(在 ng-repeat 内),然后直接进入仅包含有关该对象的更多详细信息的页面。
从 $http getUrl 中获取一个值 (product_id)(该值不是我的 html 中的指令 - javascript 还能找到它吗?)。传递此值,以便在请求“更多信息”时可以访问它。
使用当前的product_id 中的值,并使用该数字填充 getURL 来提取以下“详细信息”页面的 json 对象。
使用 ui-sref 打开一个新页面(不是新的 URL 地址,只是不同的 HTML 文档)
- 在这个新页面中应该包含产品详细信息
这是我的尝试:
.factory('cardsApi', ['$http', function ($http) {
var apiUrl = 'http://stashdapp-t51va1o0.cloudapp.net/api/item/';
function productId(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
var getApiData = function () {
return $http.get(apiUrl + productId(1, 50000))
};
var postRecordLikes = function (product_id) {
return $http.post('http://test.com/analytic/' + product_id);
}
return {
getApiData: getApiData,
postRecordLikes: postRecordLikes
};
}])
.controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
function ($scope, TDCardDelegate, cardsApi, $http) {
console.log('CARDS CTRL');
$scope.cards = [];
$scope.onSwipeRight = function (product_id) {
console.log(product_id)
}
$scope.onSwipeLeft = function (product_id) {
console.log(product_id)
}
// <====== Rewrite with accounts preferences
for (var i = 0; i < 7; i++) {
cardsApi.getApiData()
.then(function (result) {
//console.log(result.data) //Shows log of API incoming
$scope.cards.unshift(result.data);
$scope.product_id = result.data.product_id;
})
.catch(function (err) {
$log.error(err);
});
}
// Rewrite with accounts preferences =====>
$scope.$watchCollection('cards', function (newVal, oldVal) {
if (newVal < oldVal) {
cardsApi.getApiData()
.then(function (result) {
// console.log(JSON.stringify(result.data)); Shows log of API results
$scope.cards.unshift(result.data);
// console.log($scope.cards);
})
//.catch(function (err) {
// console.log(err);
//});
}
});
$scope.cardSwiped = function (card) {
console.log(card);
postRecordLikes(card);
};
//$scope.cards = Array.prototype.slice.call(cardTypes, 0);
//Removes card from top of stack
$scope.cardDestroyed = function (index) {
$scope.cards.splice(index, 1);
};
$scope.addCard = function () {
var newCard = $scope.cards[$scope.cards.length];
//newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
};
var postRecordLikes = function (product_id) {
cardsApi.postRecordLikes(product_id)
.then(function successCallback(product_id) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}
])
.controller('ProductsCtrl', ['$scope', 'TDCardDelegate', 'productApi', '$http',
function ($scope, TDCardDelegate, cardsApi, $http) {
console.log('PRODUCTS CTRL');
}
])
.factory('productApi', ['$http',
function($http) {
var apiUrl = 'http://stashdapp-t51va1o0.cloudapp.net/api/item/' + product_id;
var getApiData = function() {
return $http.get(apiUrl)
};
return {
getApiData: getApiData
};
}]
)
我的routing.js(尝试将其配置为定向到任何包含整数/数字的URL)。这总是重定向回登录...: C .config(['$stateProvider', '$urlRouterProvider', 函数($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'app/core/login/login.html'
}
},
controller: function ($ionicHistory, $scope) {
console.log('Clearing history!');
$ionicHistory.nextViewOptions({
historyRoot: true,
disableBack: true
});
}
})
.state('product', {
url: '/product',
when:('/product/?:product_id'),
views: {
'menuContent': {
templateUrl: 'app/components/product/product.html'
}
}
})
最佳答案
查询字符串将数据添加到 URL 末尾的问号之后。然后您导航到该网址:
var myvar=234;
location="http://www.example.com/?"+myvar;
在第二页中通过访问查询字符串并去掉问号来获取变量:
var newvar=location.search.replace("?", ""); // 234
然后您将使用 234 进行特定的 ajax 调用,获取 JSON 等
关于javascript - 显示特定对象的 'details' - 将 JSON 值从一个页面传递到另一页面以查询 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34396058/