angularjs의 조건부 ng-include

93

angularJS에서 조건부로 ng-include를 어떻게 할 수 있습니까?

예를 들어 변수 x가로 설정된 경우에만 무언가를 포함하고 싶습니다 true.

<div ng-include="/partial.html"></div>

angularjs angularjs-ng-include

— JustGoscha
소스

120

Angular v1.1.5 이상을 사용하는 경우 ng-if 사용할 수도 있습니다 .

<div ng-if="x" ng-include="'/partial.html'"></div>

이전 버전이있는 경우 :

사용 겨 스위치를 :

<div ng-switch on="x">
   <div ng-switch-when="true" ng-include="'/partial.html'"></div>
</div>

깡깡이

— Mark Rajcok
소스

5

예, 현재 1.2에서 깨졌습니다 : github.com/angular/angular.js/issues/3627

— Mark Rajcok 2013 년

2

이 문제는 v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko 2013

7

github.com/angular/angular.js/issues/3627#issuecomment-23539882 참조 ; 현재 버전 (1.2. *)에서는 동일한 요소에 ng-switch 및 ng-include를 사용할 수 없으므로 다음과 같은 것이 필요합니다. <div ng-switch-when = "true"> <div ng-include = " 'something ' "> </ div> <// div>

— Maarten

68

당신은 또한 할 수 있습니다

<div ng-include="getInclude()"></div>

컨트롤러에서

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}

— Ganaraj
소스

정말 좋아요. ng-switch표시 대답은 나를 위해 작동하지 않았다.

— im1dermike

1

컨트롤러가 세트 뷰 파일에 적합합니까? 나는 아닙니다. @Mark Rajcok의 대답은 사실입니다.

— ivahidmontazer

16

답변 중 하나의 좀 더 읽기 쉬운 버전입니다. Plus 설정 은 요소 ng-include를 null제거합니다 ng-if.

<div ng-include="x ? 'true-partial.html' : null"></div>

— 라팔 린데 만
소스

11

조건이 충분히 간단한 경우 ng-include 표현식에 조건부 논리를 직접 넣을 수도 있습니다.

<div ng-include="x && 'true-partial.html' || 'false-partial.html'"></div>

표현식 x이 작은 따옴표가 아니므로 평가됩니다. 자세한 내용은 http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA 를 참조하십시오.

— dspies
소스

확인 조건과 실제 포함이 잘 분리되어 있기 때문에 허용되는 솔루션이 실제로 더 읽기 쉽다고 말할 수 있습니다.

— Tobias

2

비슷한 문제가 발생했으며이 발견이 누군가에게 도움이 될 수 있습니다. 링크를 클릭하면 다른 부분을 표시해야하지만 ng-if 및 ng-switch가 모두이 시나리오에서 작동하지 않았습니다 (아래 코드가 작동하지 않음).

<button type="button" class="btn btn-link" ng-click="viewType('LIST')">List All</button>
<button type="button" class="btn btn-link" ng-click="viewType('EDIT')">Edit</button>
<button type="button" class="btn btn-link" ng-click="viewType('VIEW')">View</button>

<section class="col-md-8 left-col">
    <span ng-if = "LIST">
        <div data-ng-include="'./app/view/articles/listarticle.html'">
    </span>
    <span ng-if = "EDIT">
        <div data-ng-include="'./app/view/articles/editorarticle.html'">
    </span>

</section>

그래서 내가 한 일은 ng-if를 사용하는 대신 링크를 클릭하면 partialArticleUrl (컨트롤러의 모델) 값을 업데이트하고 html에서 아래 코드를 선언하는 것입니다.

        <section class="col-md-8 left-col">
            <div data-ng-include="partialArticleUrl">
        </section>

— KanhuP2012
소스