AngularJS循环不工作

在下面的代码硬编码的div工作正常。但试图呈现s使用angularJS，这是行不通的AngularJS循环不工作

<!doctype html> 
<html ng-app> 
<head> 
    <title> AngularJS Tabs</title> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    <style> 

     .box { 
      margin : 5px; 
      display : inline-block; 
      width: 150px; 
      height: 250px; 
      background-color: grey; 
      text-align:center; 
      vertical-align: top; 
     } 

    </style> 
</head> 

<body> 

    <!-- Testing hard coded div works --> 
    <div class='box'> 
     <b>fdhfg</b> 
    </div> 

    <!-- div through loops not works -->   
    <div ng-app="myApp" ng-controller="myCtrl"> 
     <div class='box' ng-repeat="product in Products"> 
      <b>fdhfg</b> 
     </div> 
    </div> 

    <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope) { 
      $scope.Products = [ 
           { 
            "ProductID": "12", 
            "ProductName": "GreenDetergentBar", 
            "ProductImagePath": "/images/12.png", 
            "SubCategoryID": "1", 
            "SubCategoryName": "DetergentBar", 
            "BrandID": "1", 
            "BrandName": "Wheel", 
            "Variants": [ 
             { 
              "VariantID": "1", 
              "VariantName": "500GM", 
              "VariantImagePath": "/images/12_1.png", 
              "MRP": "20.00", 
              "SellPrice": "19.50" 
             }, 
             { 
              "VariantID": "2", 
              "VariantName": "1KG", 
              "VariantImagePath": "/images/12_2.png", 
              "MRP": "40.00", 
              "SellPrice": "38.00" 
             } 
            ] 
           }, 
           { 
            "ProductID": "13", 
            "ProductName": "AmlaHairOil", 
            "ProductImagePath": "/images/13.png", 
            "SubCategoryID": "2", 
            "SubCategoryName": "HairOil", 
            "BrandID": "2", 
            "BrandName": "Dabur", 
            "Variants": [ 
             { 
              "VariantID": "3", 
              "VariantName": "100ML", 
              "VariantImagePath": "/images/13_3.png", 
              "MRP": "30.00", 
              "SellPrice": "29.50" 
             }, 
             { 
              "VariantID": "4", 
              "VariantName": "200ML", 
              "VariantImagePath": "/images/13_4.png", 
              "MRP": "60.00", 
              "SellPrice": "58.00" 
             } 
            ] 
           } 
          ]; 

          alert ($scope.Products); 

     }); 
    </script> 

</body> 
</html>

有人可以帮我解决这个问题吗？

来源

2015-04-02 Devesh Agrawal

你会得到什么错误？ – 2015-04-02 06:16:04

在控制台中没有错误:( – 2015-04-02 06:16:29

您错过了在ng-app中定义应用程序名称。

但在你的js你所提到的：

var app = angular.module('myApp', []);

在你的HTML所以正确的：

ng-app="myApp"

哎呀，你已经定义ng-app两次。这就是为什么它不能正常工作。只有一个ng-app必须在那里。

来源

2015-04-02 06:17:27 mohamedrias

AngularJS循环不工作

回答

相关问题