2014-06-09 8 views
7

Pracuję z dyrektywami w poradniku CodeSchool "kształtowanie z kanciastym" i jestem mieszany, jak działają niektóre składnie. Na przykład w poniższym kodzie, na przykład ng-repeat="product in store.products", używają zarówno liczby pojedynczej, jak i mnogiej tego samego słowa, nawet jeśli nie zostało wcześniej zadeklarowane pojedyncze wyrażenie (według mojej wiedzy). To kilka razy w całym trupie.Confused by Angular.js użycie składni mnogiej/pojedynczej (przez tutorial kodów szkolnych)

Czy Angular może interpretować autorytatywne intencje w ten sposób ?!

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" 
    ] 
    }]; 
})(); 
+1

https://docs.angularjs.org/api/ng/directive/ngRepeat –

+1

'produkt' nie ma nic wspólnego z' store.products'. Możesz napisać 'blahblah' w' store.products' – lucuma

Odpowiedz

8

Liczba pojedyncza/mnogość jest używana tylko dla zdrowego rozsądku i czytelności kodu - nie musi to być liczba pojedyncza/mnoga. Można zrobić

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

i wtedy obiekt whatever dostępne wewnątrz (jak: <img ng-src="{{whatever.images[0]}}" />).

W twoim przypadku, store.products nie może być zmieniony, ponieważ odnosi się do rzeczywistego obiektu, natomiast product jest całkowicie niestandardową nazwą do użycia w pętli powtarzania.

Dość często w programowaniu. Podobnie jak w przypadku innej odpowiedzi, jest ona podobna do składni for..in.

4

ta jest zasadniczo taka sama jak składnia JavaScript for...in loop. To oznacza dla someTempVar in someArrayOrObject.

3

Dyrektywa ng-repeat="product in products" tworzy nową zmienną product, którą można umieścić wewnątrz szablonu. Nie ma interpolacji liczby pojedynczej/mnogiej.