Question

我是网络开发的新手，我一直致力于一个小项目。

这就是我想要实现的目标。我有10个产品的嵌套JSON数据。这是我正在使用的data。

我有一个＆＃34;查看更多＆＃34;每个产品的按钮，用于其规格。可以使用索引来访问规范，例如＆＃34; products [index] .ProductInfo.p_product_specs.Value＆＃34; 。当我点击＆＃34;查看更多＆＃34;按钮，我正在路由到另一个页面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>

我在控制器中有一个函数，它返回数组中产品的索引＆＃34; products＆＃34;一旦我点击＆＃34;查看更多＆＃34;按钮。

$scope.viewmorefn = function(){
    var self = this;
    $scope.id = (function() {
        //some code which returns index, console.log gives correct results.
        return index;
    }                 
    )();
 }

但是当我尝试使用＆＃34; id＆＃34;在ng-repeat（在viewmore.html中），它只是不起作用。我有什么方法可以制作＆＃34; id＆＃34;可以在我的viewmore.html页面访问？任何帮助将不胜感激，我已经给了这2天。感谢。

编辑：@ uowzd01：我不确定数据是否丢失。控制器有这个：

$http.get(url)
    .success(function (result) {
                $scope.products = result.ProductsList;
         })
    .error( function (data, status) {
           console.log("Error retrieving data");  
 });

在viewmore.html中，我能够插入＆＃34; {{products}} ＆＃34;和 {{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'
        })
});

Answer 1

Plunker Demo

首先，要清除一些灰尘 - 虽然这不是具体问题，但是你在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);
    }
}]);

使用您提供的所有代码更新提供的plunker。不要忘记将新服务注入您的控制器。这应该让你起步并运行，尽管我之前说过，它非常难看。

在AngularJS中访问ng-repeat中的Controller变量

1 个答案: