Условное ng-включение в angularjs

Question 1

Как я могу условно включить ng-include в angularJS?

Например, я хочу включить что-то только в том случае, если для переменной xустановлено значение true.

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

Question 2

Если вы используете 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>

Скрипка

Question 3

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

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

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

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

Question 4

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

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

Question 5

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

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

Обратите внимание, что выражение xне заключено в одинарные кавычки и поэтому оценивается. См. Http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA для получения дополнительной информации.

Question 6

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