Angular.js의 복수형/단수 구문 사용에 혼란 있음 (코드 스쿨 튜토리얼을 통해)

저는 CodeSchool의 "angularing with shaping"튜토리얼에서 지시어를 사용하고 있으며 일부 구문이 어떻게 작동하는지에 대해 혼란스러워합니다. 예를 들어, 아래 코드에서 ng-repeat="product in store.products"은 단수 표현이 이전에 선언되지 않은 경우에도 동일한 단어의 단수 및 복수 버전을 모두 사용합니다 (필자의 지식에 따라). 이 장면은 여러 번 발생합니다.Angular.js의 복수형/단수 구문 사용에 혼란 있음 (코드 스쿨 튜토리얼을 통해)

Angular는 이런 식으로 저작 의도를 해석 할 수 있습니까?!

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

출처

2014-06-09 dpren

https://docs.angularjs.org/api/ng/directive/ng 답장 –

'product'는'store.products'와 아무 관련이 없습니다. store.products에'blahblah'라고 쓸 수 있습니다. – lucuma

단수/복수는 상식 및 코드 가독성을 위해 사용되며 단수/복수 일 필요는 없습니다. 당신은

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

을하고 다음 내부 사용할 수있는 whatever 객체를 가질 수 있습니다 (같은이 : <img ng-src="{{whatever.images[0]}}" />).

store.products은 실제 개체를 나타내므로 변경할 수 없으며 product은 반복 루프에 사용할 완전한 사용자 지정 이름입니다.

프로그래밍에서 상당히 일반적입니다. 다른 대답과 마찬가지로, for..in 구문과 비슷합니다.

출처

2014-06-09 20:02:11 Shomz

이것은 본질적 for...in loop 자바 스크립트와 같은 구문이다. someTempVar in someArrayOrObject을 의미합니다.

출처

2014-06-09 20:01:31 Jon7

지시문 ng-repeat="product in products"은 템플릿 내에서 참조 할 수있는 새로운 변수 product을 만듭니다. 계속되는 단수/복수 보간은 없습니다.

출처

2014-06-09 20:07:31

Angular.js의 복수형/단수 구문 사용에 혼란 있음 (코드 스쿨 튜토리얼을 통해)

답변

관련 문제