Условное ng-включение в угловом

Ответ 1

Если вы используете Angular v1.1.5 или новее, вы также можете использовать ng-if:

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

Если у вас есть более старая версия:

Используйте ng-switch:

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

Fiddle

Ответ 2

Вы также можете сделать

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

В вашем контроллере

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

Ответ 3

Немного более читаемая версия одного из ответов. Плюс установка ng-include в null удаляет элемент - точно так же, как ng-if.

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

Ответ 4

Если условие достаточно простое, вы можете также поставить условную логику непосредственно в выражение ng-include:

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

Обратите внимание, что выражение x не находится в одинарных кавычках и поэтому оценивается. Подробнее см. http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA.

Ответ 5

Я столкнулся с подобной проблемой, и, возможно, этот вывод может помочь кому-то. Я должен отображать различные частичные щелчки по ссылке, но 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>