잉 반복 기능 나던 작업

오늘 Angular.js 내 첫 날, 나는 기본 컨트롤러에 붙어 :잉 반복 기능 나던 작업

내 APP.js

(function() 
    { var app = angular.module('store', [ ]); 

     app.controller('StoreController', function() 
     { 
      this.product = gem; 
     }); 

    var gem = [ 
      {name:'John', price:25, description:'boy',soldout: false,canpurchase:true}, 
      {name:'Kohn', price:25, description:'boy',soldout: false,canpurchase:true} 
      ] 
      //not mentioned:false 


    })();

index.HTML 사용

<!DOCTYPE html> 
<html ng-app="store"> 
     <script src="js/angular.min.js" type="text/javascript"></script> 
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
     <title>Purple</title> 
    </head> 
    <body ng-controller = "StoreController as store"> 
     <script src="js/app.js" type="text/javascript"></script> 
     <h1>{{"Create your CV"}}</h1> 
     <div ng-repeat="products in store.product"> 

     <div ng-hide="store.product.soldout"> 
     <h1> {{store.product.name}} </h1> 
     <h2><em class="pull-right">{{store.product.price | currency}}</em></h2> 
     <h3> {{store.product.description}} </h3> 
     <button ng-show = "store.product.canpurchase"> Add to cart </button> 
     </div> 

     </div></body></html>

ng-repeat를 선택하지 않고 각 항목을 배열로 표시하면 디스플레이가 표시되지만 "ng-repeat"가 아닌 경우 코드가 정상적으로 작동하지만 NG - 반복이 작동하지 않습니다. 나는 무엇을 놓치고 있습니까?

부정적이 표시 해달라고하세요, 내가 바이올린에이 질문을

코드를 요청하기 전에 많은 연구를했을 : http://jsfiddle.net/68Dkz/2/

출처

2014-07-12 Abhinav

에 ng-repeat 내의 개별 항목이다, 나는 확신 당신이해야 'store '대신'products'를 사용하십시오. 'store.product.name' 대신'products.name'을 시도하십시오 – SharkofMirkwood

을 제안했다. 배열에 두 개 이상의 제품이 포함되어 있기 때문에 product이 컨트롤러에서 products으로 변경되었습니다. 나는 당신이 어떤 혼동 gtting 생각하는 것은 배열 인해 NG-반복 안쪽이

<div ng-repeat="product in store.products"> 

    <div ng-hide="product.soldout"> 
     <h1> {{product.name}} </h1> 
     <h2><em class="pull-right">{{store.product.price | currency}}</em></h2> 
     <h3> {{product.description}} </h3> 
     <button ng-show="product.canpurchase">Add to cart</button> 
    </div> 

    </div>

DEMO

출처

2014-07-12 14:50:39 charlietfl

+1 남은 답변은 스타일 문제를 주로 다루며 오직 원래의 기본 이슈를 만납니다. – Mgetz

감사합니다. 작동하지만 왜 지금 작동하는지 설명해주십시오. 두 번째 질문으로 제품을 제품으로 변경 한 경우 product.name을 어떻게 참조하고 있습니까? (여전히 작동하는 이유는 무엇입니까?) – Abhinav

@Mgetz 실제로 컨트롤러 별칭을 처음 사용했습니다. 그것 없이는 당신의 방법론에 추가하기가 어렵습니다. – charlietfl

store는, products in product하지 need it in the iteration하지 스코프 모듈이다 대신

<div ng-repeat="products in product"> 
    <div ng-hide="products.soldout"> 
     <h1> {{products.name}} </h1> 
     <h2><em class="pull-right">{{products.price | currency}}</em></h2> 
     <h3> {{products.description}} </h3> 
     <button ng-show = "products.canpurchase"> Add to cart </button> 
    </div> 
</div>

정지 컨트롤러를 앨리어싱, 그것은 불필요하며 문제를 일으킬 수 있습니다 당신의 반복자가 혼란으로 products를 사용하여 HTML 컴파일러
와의, 나는 같이 컨트롤러 별칭 store를 사용하여 버전을 작동하고 수집 products와 반복자 여기 product

출처

2014-07-12 14:36:59 Mgetz

'store'는 컨트롤러이고'ng-controller'를 정의 할 때 마크 업에서'as ' – charlietfl

@charlietfl'storeController'는 컨트롤러이며 초기 ng-controller 지시문에서 참조 할 필요가 있습니다. 컨트롤러를 별명 지정하는 것은 모듈을 순회하면서 현명하지 않습니다. – Mgetz

''ng-controller = "StoreController를 상점" – charlietfl

잉 반복 기능 나던 작업

답변

관련 문제