Fatal编程技术网
  • html/
  • Html 访问AngularJS中ng repeat中的控制器变量

Html 访问AngularJS中ng repeat中的控制器变量

html angularjs

Html 访问AngularJS中ng repeat中的控制器变量,html,angularjs,Html,Angularjs,我对网络开发还很陌生，我一直在做一个小项目 这就是我想要达到的目标。我有10个产品的JSON数据嵌套得很糟糕。这是我正在使用的 对于每个产品的规格，我都有一个“查看更多”按钮。可以使用诸如产品[index].ProductInfo.p\u产品\u规格值“之类的索引来访问规范。当我点击“查看更多”按钮时，我正在发送到另一个页面viewmore.html。在viewmore.html中，我有以下html代码 <div ng-controller='mainController'>

我对网络开发还很陌生，我一直在做一个小项目

这就是我想要达到的目标。我有10个产品的JSON数据嵌套得很糟糕。这是我正在使用的

对于每个产品的规格，我都有一个“查看更多”按钮。可以使用诸如产品[index].ProductInfo.p\u产品\u规格值“之类的索引来访问规范。当我点击“查看更多”按钮时，我正在发送到另一个页面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>
但是当我尝试在ng repeat（在viewmore.html中）中使用“id”时，它就是不起作用。是否有任何方法可以在我的viewmore.html页面中访问“id”？任何帮助都将不胜感激，我已经给了这两天了。谢谢

编辑：@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：第一页：产品列表页面.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>



    

  • {{spec.Key}}:{{spec.Value}
    •
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'
        })
});

var myApp=angular.module（'myApp'，['ngRoute']）；
myApp.controller（'mainController'，['$scope'，'$window'，'$filter'，'$http'，函数（$scope，$window，$filter，$http）{
$http.get（'data.txt'）
.成功（功能（结果）{
$scope.products=result.ProductsList；
})
.错误（功能（数据、状态）{
log（“检索数据时出错”）；
});
$scope.hoverIn=函数（）{
$scope.isShow=true；
$scope.pr=这个；
$scope.price=this.product.ProductInfo.p_产品价格；
}
$scope.hoverOut=function（）{
$scope.isShow=false；
}
$scope.returnPrice=函数（）{
$window.alert（'价格为$'+$scope.price）；
}
$scope.viewmorefn=函数（）{
var self=这个；
$scope.selfId=（函数（）{
var计数=0；
var str1=self.product.ProductInfo.Brand+self.product.ProductInfo.p\u产品描述；
对于（变量i=0；i<$scope.products.length；i++）
{
var str2=$scope.products[i].ProductInfo.Brand+$scope.products[i].ProductInfo.p\u产品描述；
如果（str1==str2）
打破
计数=计数+1；
}
返回计数；
}                 
)();
log（'id为：'+$scope.selfId）；
}
}]);
myApp.directive（“showreat”，function（））{
返回{
模板：“
{pr.product.ProductInfo.Brand}{{pr.product.ProductInfo.p_-product_-description}
  • {spec Key}
    • {ul product.ProductInfo.p_-product|price}
    {{pr.product.ProductInfo.p_产品|价格|货币}'
}
});
myApp.指令（“showProducts”，函数（）{
返回{
模板：“


    {{product.ProductInfo.Brand}{{product.ProductInfo.p_产品描述}}

    {{product.ProductInfo.p_产品价格|货币}
    ”
}
});
myApp.filter（'newFilter'，function（）{
返回函数（newSpec）{
var out=[]；
forEach（newSpec，function（newSpec）{
如果（（newSpec.Key=='ENERGY STAR Qualified'）&（newSpec.Value=='Yes'））{
向外推（newSpec）；
}
});
返回；
}
});
myApp.config（函数（$routeProvider）{
$routeProvider
//主页的路径
。当（“/”{
templateUrl:'home.html'，
控制器：“主控制器”
})
//查看更多页面的路由
.when（“/viewmore”{
templateUrl:'viewmore.html'，
控制器：“主控制器”
})
});

首先，要清除HTML和ngRoute中的一些灰尘（虽然这不是具体问题，但您多次实例化同一个控制器）。选择一个，而不是两个。我去掉了HTML中的ng控制器指令，所以它现在只使用ngRoute。然而，由于您为两个视图调用了同一个控制器，因此ller正在丢失它的值，因为您正在获取控制器的一个新实例。它还两次获取相同的数据。从技术上讲，它是非常糟糕的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);
    }
}]);

myApp.controller（'mainController'，['$scope'，'$window'，'$filter'，'$http'，'theIndex'，函数（$scope，$window，$filter，$http，theIndex）{
$scope.selfId=theIndex.val；//获取存储的任何索引值（如果有）
//…邦查的东西
$scope.viewmorefn=函数（）{
var self=这个；
$scope.selfId=（函数（）{
var计数=0；
var str1=self.product.ProductInfo.Brand+self.product.ProductInfo.p\u产品描述；
对于（变量i=0；i<$scope.products.length；i++）

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);
    }
}]);