3

나는이 질문에 관해 어떤 코드 스 니펫도 제공 할 수 없다는 사과를 드리고자합니다. AngularJS. 위의 코드를 사용하여ng-view를 사용하여 ng-repeat 내의 AngularJS 렌더링 다른 템플릿

<div ng-repeat="item in list" ng-view></div> 

, item.type 특성에 의존 할 것이다 다른 템플릿을 렌더링 할 수있을 것입니다. 나는이 같은 결과를 기다리고 있었다 :

  • item.type는 == "이미지"는 반환 :<div><img src="'IMAGE_URI'"></div>
  • item.type == "텍스트"를 반환 :<div><p>TEXT</p></div>

로를 지금은 item.type의 열거 형에 대한 템플릿 html을 작성했습니다. 이 문제는 AngularJS을 사용하여 가능합니까? 나는 최근에 ng-route과 함께 ng-view을 배웠다.

답변

2

ng-view 만 가질 수 있습니다.
이 모양은 answer입니다. NG-보기에 대한 documentation에서

:

ngView is a directive that complements 
the $route service by including the rendered 
template of the current route into the main 
layout (index.html) file. 

Every time the current route changes, 
the included view changes with it according 
to the configuration of the $route service. 

Requires the ngRoute module to be installed. 

당신이 찾고있는 무엇 ng-switch이 이 두 가지를 결합하는 방법에 대한이 answer을 살펴과 함께, ng-include입니다.

ng-include는 새 하위 범위를 만들고 컨트롤러에서 상속합니다. 이 주제에 대한 자세한 내용은 answer을 참조하십시오.

+0

후속 질문을. 'ng-include'를 사용하면 일부 데이터 바인딩 함수를 사용할 수 있도록'scope'에 여전히 액세스 할 수 있습니까? –

+0

답변을 업데이트했습니다. –

3

나는 당신이 그것을 할 수있는 하나의 방법은 사용하는 것입니다 생각 'NG-경우'조건부 HTML을 포함합니다 :

<div ng-repeat="item in list"> 
     <div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div> 
     <div ng-if="item.type == 'text'><div><p>TEXT</p></div> 
</div>