我对Web开发非常陌生，并且我一直在从事一个小项目。
这就是我要实现的目标。我有10种产品的嵌套JSON数据严重错误。这是我正在使用的数据。
对于每个产品的规格，我都有一个“查看更多”按钮。可以使用诸如“ products [index] .ProductInfo.p_product_specs.Value”之类的索引来访问规范。当我单击“查看更多”按钮时，我将路由到另一个页面viewmore.html。在viewmore.html中，我有此html代码
<div ng-controller='mainController'>
<div class="viewMore">
<ul ng-repeat="spec in products[id].ProductInfo.p_product_specs.Value">
{{ spec.Key }} : {{ spec.Value}}
</ul>
</div>
</div>
我在控制器中有一个函数，当我单击“查看更多”按钮时，该函数将在数组“产品”中返回该产品的索引。
$scope.viewmorefn = function(){
var self = this;
$scope.id = (function() {
//some code which returns index, console.log gives correct results.
return index;
}
)();
}
但是，当我尝试在ng-repeat中使用“ id”（在viewmore.html中）时，它根本不起作用。有什么方法可以使我的viewmore.html页面中的“ id”可用？任何帮助将不胜感激，我已经给了这2天。谢谢。
编辑：@ uowzd01：我不确定数据是否丢失。控制器具有以下功能：
$http.get(url)
.success(function (result) {
$scope.products = result.ProductsList;
})
.error( function (data, status) {
console.log("Error retrieving data");
});
并且在viewmore.html中，我可以插值“ {{products}}和{{products [0] .ProductInfo.p_product_specs.Value}}以及其他对象的数据（如果我明确指定索引的话）。
编辑2：完整的代码
HTML：第一页：product_list_page.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="assets/css/reset.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-route.min.js"></script>
<script src="app.js"></script>
<div class="main">
<div ng-view></div>
</div>
</body>
</html>
home.html
<div ng-controller='mainController'>
<div class="showProduct">
<div ng-show="isShow" ng-mouseenter="isShow=true">
<show-repeat></show-repeat>
</div>
</div>
<div class="eproducts" ng-repeat="product in products">
<div class="fixed-size-square" ng-mouseenter="hoverIn()">
<show-products></show-products>
</div>
</div>
</div>
viewmore.html
<div>
<div class="viewMore">
<ul ng-repeat="spec in products[selfId].ProductInfo.p_product_specs.Value">
<li> {{ spec.Key }} : {{ spec.Value}} </li>
</ul>
</div>
</div>
JavaScript代码：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('mainController', ['$scope', '$window', '$filter', '$http', function($scope, $window, $filter, $http){
$http.get('data.txt')
.success(function (result) {
$scope.products = result.ProductsList;
})
.error( function (data, status) {
console.log("Error retrieving data");
});
$scope.hoverIn = function() {
$scope.isShow = true;
$scope.pr = this;
$scope.price = this.product.ProductInfo.p_product_price;
}
$scope.hoverOut = function() {
$scope.isShow = false;
}
$scope.returnPrice = function() {
$window.alert('The price is $' + $scope.price);
}
$scope.viewmorefn = function(){
var self = this;
$scope.selfId = (function() {
var count = 0;
var str1 = self.product.ProductInfo.Brand + self.product.ProductInfo.p_product_description;
for ( var i = 0 ; i < $scope.products.length ; i++)
{
var str2 = $scope.products[i].ProductInfo.Brand + $scope.products[i].ProductInfo.p_product_description;
if(str1 === str2)
break;
count = count + 1;
}
return count;
}
)();
console.log('id is : ' +$scope.selfId);
}
}]);
myApp.directive("showRepeat", function(){
return {
template : '<img class="lgImage" src="{{ pr.product.imageURLs.lg }}"> <br / > <div class="descText"> {{ pr.product.ProductInfo.Brand }} {{ pr.product.ProductInfo.p_product_description }} <br /> <div class="divClass"> <ul class="descList" ng-repeat="spec in pr.product.ProductInfo.p_product_specs.Value | newFilter"> <li> {{ spec.Key }} </li> </ul> </div> </div> <span class="priceText"> {{ product.ProductInfo.p_product_price | currency }} <br /> </span> <button id="cartBtn" ng-click="returnPrice()">Add to Cart</button> <br /> <div class="priceTop">{{ pr.product.ProductInfo.p_product_price | currency }} </div>'
}
});
myApp.directive("showProducts", function(){
return {
template : '<div class="prdList"><br /><img class="showprdimg" src="{{ product.imageURLs.sm }}"><br /><br/> <div class="spanText">{{ product.ProductInfo.Brand }} {{ product.ProductInfo.p_product_description }} </div> <br /><br/> <div class="priceText">{{ product.ProductInfo.p_product_price | currency }} </div><br/><a href="#/viewmore">"<button id="viewMoreBtn" ng-click="viewmorefn()">View More</button></a></div>'
}
});
myApp.filter('newFilter', function(){
return function(newSpec) {
var out = [];
angular.forEach(newSpec, function (newSpec) {
if((newSpec.Key === 'ENERGY STAR Qualified') && (newSpec.Value ==='Yes')) {
out.push(newSpec);
}
});
return out;
}
});
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
// route for the view more page
.when('/viewmore', {
templateUrl : 'viewmore.html',
controller : 'mainController'
})
});
首先，要清除一些尘土-尽管不是特定的问题，但是您要在HTML和ngRoute中实例化同一个控制器多次。选择一个，而不是两个。我摆脱了HTML中的ng-controller指令，因此现在仅使用ngRoute。但是，因为您要为两个视图调用同一控制器，所以该控制器将丢失其值，因为您正在获取该控制器的新实例。它还两次获取相同的数据。从技术上讲，它确实是糟糕的JavaScript。您应该查看ui-router并执行一些嵌套视图，并一次实例化控制器并一次获取数据。
为了使其正常工作，我实质上创建了一个服务来将索引值存储在以下位置：
myApp.factory('theIndex', function() {
return {
val: ''
}
})
加载控制器时，它将拉取存储在服务中的所有值，并且当您单击“查看更多”按钮时，它将在服务中存储索引值。
myApp.controller('mainController', ['$scope', '$window', '$filter', '$http', 'theIndex', function($scope, $window, $filter, $http, theIndex){
$scope.selfId = theIndex.val; // get whatever index value is stored, if any
//... buncha stuff
$scope.viewmorefn = function(){
var self = this;
$scope.selfId = (function() {
var count = 0;
var str1 = self.product.ProductInfo.Brand + self.product.ProductInfo.p_product_description;
for ( var i = 0 ; i < $scope.products.length ; i++)
{
var str2 = $scope.products[i].ProductInfo.Brand + $scope.products[i].ProductInfo.p_product_description;
if(str1 === str2)
break;
count = count + 1;
}
return count;
}
)();
theIndex.val = $scope.selfId // set the index value here
console.log('id is : ' +$scope.selfId);
}
}]);
使用您提供的所有代码更新提供的插栓。不要忘记将新服务注入到您的控制器中。这应该可以使您启动并运行，尽管就像我之前说的那样，这非常丑陋。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句