AngularJS循环不工作

AngularJS loop not working

本文关键字：工作循环 AngularJS 更新时间：2023-09-26

在下面的代码中，硬编码的div运行良好。但是尝试使用angularJS渲染s，这在中不起作用

<!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>

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

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

但在你的js中，你提到了：

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

所以在你的HTML:中是正确的

ng-app="myApp"

哎呀，您已经定义了两次ng-app。这就是它不能正常工作的原因。必须只有一个ng-app。