Geek Answers Handbook

Confuses AngularJS ng-repeat syntax

What does the syntax ng-repeat="product in store.products" ?

index.html:

 <!DOCTYPE html> <html ng-app="gemStore"> <head> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body class="list-group" ng-controller="StoreController as store"> <!-- Product Container --> <div class="list-group-item" ng-repeat="product in store.products"> <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3> <!-- Image Gallery --> <div class="gallery"> <div class="img-wrap"> <img ng-src="{{product.images[0]}}" /> </div> <ul class="img-thumbnails clearfix"> <li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{product.images[0]}}" /> </li> </ul> </div> </div> </body> </html>

app.js:

 (function() { var app = angular.module('gemStore', []); app.controller('StoreController', function() { this.products = gems; }); var gems = [{ name: 'Azurite', description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.", shine: 8, price: 110.50, rarity: 7, color: '#CCC', faces: 14, images: [ "images/gem-02.gif", "images/gem-05.gif", "images/gem-09.gif" ] }, { name: 'Bloodstone', description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.", shine: 9, price: 22.90, rarity: 6, color: '#EEE', faces: 12, images: [ "images/gem-01.gif", "images/gem-03.gif", "images/gem-04.gif" ] }, { name: 'Zircon', description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.", shine: 70, price: 1100, rarity: 2, color: '#000', faces: 6, images: [ "images/gem-06.gif", "images/gem-07.gif", "images/gem-10.gif" ] }]; })();
+7
syntax angularjs singular directive plural
source share
3 answers

A singular / plural is used only for common sense and code readability - it should not be singular / plural. You can do

 ng-repeat="whatever in store.products"`

and then whatever is available inside (for example: <img ng-src="{{whatever.images[0]}}" /> ).

In your case, store.products cannot be changed since it refers to the actual object, and product is the fully customizable name that will be used in the iteration loop.

Pretty common in programming. Like the other answer, it is similar to the for..in syntax.

+8
source share

This is essentially the same syntax as javascript for ... in a loop . This means someTempVar in someArrayOrObject .

+4
source share

The ng-repeat="product in products" directive creates a new product variable that you can reference inside your template. There is no singular / multiple interpolation.

+3
source share

More articles:


All Articles