Ng-include có điều kiện trong anglejs

93

Làm cách nào tôi có thể thực hiện ng-include có điều kiện trong angleJS?

Ví dụ: tôi chỉ muốn bao gồm một cái gì đó nếu, biến xđược đặt thành true.

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

angularjs angularjs-ng-include

— JustGoscha
nguồn

120

Nếu bạn đang sử dụng Angular v1.1.5 trở lên, bạn cũng có thể sử dụng ng-if :

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

Nếu bạn có bất kỳ phiên bản cũ hơn:

Sử dụng ng-switch :

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

Vĩ cầm

— Mark Rajcok
nguồn

5

Vâng, nó hiện đang bị phá vỡ trong 1.2: github.com/angular/angular.js/issues/3627

— Đánh dấu Rajcok

2

Sự cố đã được khắc phục trong v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Xem github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; trong phiên bản hiện tại (1.2. *) bạn không thể sử dụng ng-switch và ng-include trên cùng một phần tử, vì vậy bạn cần một cái gì đó như: <div ng-switch-when = "true"> <div ng-include = "'something '"> </div> <// div>

— Maarten

68

Bạn cũng có thể làm

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

Trong bộ điều khiển của bạn

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

— ganaraj
nguồn

Chỉ thực sự tốt đẹp. Các ng-switchcâu trả lời được đánh dấu không làm việc cho tôi.

— im1dermike

1

Bộ điều khiển có thích hợp cho các tập tin dạng xem không? Tôi nghĩ, câu trả lời của @Mark Rajcok là đúng.

— ivahidmontazer

16

Một phiên bản dễ đọc hơn một chút của một trong những câu trả lời. Cộng với cài đặt ng-includeđể nullloại bỏ phần tử - giống như ng-if.

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

— Rafał Lindemann
nguồn

11

Nếu điều kiện đủ đơn giản, bạn cũng có thể đặt logic điều kiện trực tiếp trong biểu thức ng-include:

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

Lưu ý rằng biểu thức xkhông nằm trong dấu ngoặc kép và do đó được đánh giá. Xem http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA để biết thêm chi tiết.

— dspies
nguồn

Tôi sẽ nói rằng giải pháp được chấp nhận thực sự dễ đọc hơn vì điều kiện kiểm tra và bao gồm thực tế được tách biệt độc đáo.

— Tobias

2

Tôi đã gặp sự cố tương tự và có thể phát hiện này có thể giúp ích cho ai đó. Tôi phải hiển thị các phần khác nhau khi nhấp vào liên kết nhưng cả ng-if và ng-switch đều không hoạt động trong trường hợp này (Mã bên dưới không hoạt động).

<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>

Vì vậy, những gì tôi đã làm là, thay vì sử dụng ng-if, Khi nhấp vào liên kết, chỉ cần cập nhật giá trị của partArticleUrl (là một mô hình trong bộ điều khiển) và khai báo mã bên dưới trên html.

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

— KanhuP2012
nguồn