Seagull Seagull - 1 month ago 10
AngularJS Question

WHat is wrong with my angular code?

<body>
<div data-ng-controller="itemController as store">
<ul class="list-group">
<li class="list-group-item" data-ng-repeat="product in store.product.names">
<h3>{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
</li>
</ul>
</div>
<script type="text/javascript">
(function() {
var app = angular.module('store', []);
app.controller('itemController', function($scope) {
$scope.product = gem;
});

var gem = [{
name: 'Item1',
price: 15
}, {
name: 'Item2',
price: 16
}, {
name: 'Item3',
price: 17
}, {
name: 'Item4',
price: 18
}, {
name: 'Item5',
price: 19
}];
})();
</script>
<!-- <script src="jquery.js"></script>-->
<script src="app.js"></script>




After viewing the page on my browser and checked the console page, i received this error message

Error: [ng:areq] Argument 'itemController' is not a function, got undefined.

Answer

You should not use product.names with ng-repeat.

Try Below Code :

<body>
<div data-ng-controller="itemController as store">
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="product in products">
            <h3>{{product.name}}
                {{product.price}}
        </h3>
        </li>
    </ul>
</div>
<script type="text/javascript">
(function() {
    var app = angular.module('store', []);
    app.controller('itemController', function($scope) {
        $scope.products = gem;
    });

    var gem = [{
        name: 'Item1',
        price: 15
    }, {
        name: 'Item2',
        price: 16
    }, {
        name: 'Item3',
        price: 17
    }, {
        name: 'Item4',
        price: 18
    }, {
        name: 'Item5',
        price: 19
    }];
})();
</script>
<!-- <script src="jquery.js"></script>-->
<script src="app.js"></script>