AngularJS loop not working

Question

In the code below Hard coded div works fine. But trying to render s using angularJS, which is not working

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

Can someone help me to fix the problem?

What error you are getting?

Just code
– Just code

2015-04-02 06:16:04 +00:00
Commented Apr 2, 2015 at 6:16 — Just code
– Just code, Commented Apr 2, 2015 at 6:16
No error in console :(

Devesh Agrawal
– Devesh Agrawal

2015-04-02 06:16:29 +00:00
Commented Apr 2, 2015 at 6:16 — Devesh Agrawal
– Devesh Agrawal, Commented Apr 2, 2015 at 6:16

mohamedrias · Accepted Answer · 2015-04-02 06:17:27Z

3

You've missed to define the app name in ng-app.

But in your js you have mentioned:

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

So correct in your HTML:

ng-app="myApp"

Oops, you have defined ng-app twice. That's why its not working properly. Only one ng-app must be there.

answered Apr 2, 2015 at 6:17

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS loop not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related