Умовне ng-включення в angularjs

93

Як я можу зробити 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-перемикач :

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

Скрипка

— Марк Райчок
джерело

5

Так, наразі це розбито на 1.2: github.com/angular/angular.js/isissue/3627

— Марк Райкок

2

Проблему було виправлено у версії 1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Євген Глухоторенко

7

Див. Github.com/angular/angular.js/isissue/3627#issuecomment-23539882 ; у поточних версіях (1.2. *) ви не можете використовувати ng-перемикач і ng-include для того ж елемента, тому вам потрібно щось на зразок: <div ng-switch-when = "true"> <div ng-include = "'щось '"> </div> <// div>

— Маартен,

68

Ви також можете зробити

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

У вашому контролері

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

— ганарадж
джерело

Просто дуже приємно. ng-switchВідзначено відповідь не працює для мене.

— im1dermike

1

Чи підходить контролер для встановлених файлів перегляду? Я думаю, ні. Відповідь Марка Райкока відповідає дійсності.

— 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, при натисканні посилання просто оновити значення parAArticleUrl (яка є моделлю в контролері) і оголосити нижче код на html.

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

— KanhuP2012
джерело