angularjs의 조건부 ng-include

angularjs의 조건부 ng-include

---

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

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

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

---

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>

깡깡이

---

당신은 또한 할 수 있습니다

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

컨트롤러에서

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

---

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

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

---

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

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

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

---

비슷한 문제가 발생했으며이 발견이 누군가에게 도움이 될 수 있습니다. 링크를 클릭하면 다른 부분을 표시해야하지만 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>

참고 URL : https://stackoverflow.com/questions/15974086/conditional-ng-include-in-angularjs