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

94

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

Например, я хочу включить что-то только в том случае, если для переменной 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>

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

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

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

Скрипка

Марк Райкок
источник
5
Да, в настоящее время он не работает в
версии
2
Проблема исправлена ​​в v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js
Евгений Глухоторенко
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>
Маартен
68

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

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

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

$scope.getInclude = function(){
    if(x){
        return "partial.html";
    }
    return "";
}
Ганарадж
источник
Просто очень мило. ng-switchОтмечен ответ не работает для меня.
im1dermike
1
Подходит ли контроллер для файлов представления набора? Я думаю, нет. Ответ @Mark Rajcok верен.
ivahidmontazer
16

Чуть более читабельный вариант одного из ответов. Плюс установка 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 для получения дополнительной информации.

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