Ng-termasuk bersyarat di angularjs

93

Bagaimana saya bisa melakukan ng-include secara kondisional di angularJS?

Misalnya saya hanya ingin memasukkan sesuatu jika, variabel xdisetel ke true.

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

angularjs angularjs-ng-include

— JustGoscha
sumber

120

Jika Anda menggunakan Angular v1.1.5 atau yang lebih baru, Anda juga dapat menggunakan ng-if :

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

Jika Anda memiliki versi yang lebih lama:

Gunakan ng-switch :

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

Biola

— Mark Rajcok
sumber

5

Ya, saat ini rusak di 1.2: github.com/angular/angular.js/issues/3627

— Mark Rajcok

2

Masalah telah diperbaiki di v1.2.2-23ba287 code.angularjs.org/snapshot/angular.js

— Eugene Gluhotorenko

7

Lihat github.com/angular/angular.js/issues/3627#issuecomment-23539882 ; dalam versi saat ini (1.2. *) Anda tidak dapat menggunakan ng-switch dan ng-include pada elemen yang sama, jadi Anda memerlukan sesuatu seperti: <div ng-switch-when = "true"> <div ng-include = "'sesuatu '"> </div> <// div>

— Maarten

68

Anda juga bisa melakukannya

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

Di pengontrol Anda

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

— Ganaraj
sumber

Sangat bagus. The ng-switchjawaban ditandai tidak bekerja untuk saya.

— im1dermike

1

Apakah Kontroler sesuai untuk file tampilan set? Saya pikir, Tidak. Jawaban @Mark Rajcok benar.

— ivahidmontazer

16

Versi yang lebih mudah dibaca dari salah satu jawaban. Ditambah pengaturan ng-includeuntuk nullmenghilangkan elemen - seperti ng-if.

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

— Rafał Lindemann
sumber

11

Jika kondisinya cukup sederhana, Anda juga bisa meletakkan logika kondisional secara langsung di ekspresi ng-include:

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

Perhatikan bahwa ekspresi xtidak dalam tanda kutip tunggal dan oleh karena itu dievaluasi. Lihat http://plnkr.co/edit/4fvNDa6Gm3dbVLgsAZrA untuk lebih jelasnya.

— dspies
sumber

Saya akan mengatakan solusi yang diterima sebenarnya lebih mudah dibaca karena kondisi pemeriksaan dan penyertaan aktual dipisahkan dengan baik.

— Tobias

2

Saya mengalami masalah serupa dan mungkin temuan ini dapat membantu seseorang. Saya harus menampilkan sebagian yang berbeda saat mengklik tautan tetapi ng-if dan ng-switch keduanya tidak berfungsi dalam skenario ini (Kode di bawah ini tidak berfungsi).

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

Jadi yang saya lakukan adalah, alih-alih menggunakan ng-if, Saat mengklik tautan cukup perbarui nilai parsialArticleUrl (yang merupakan model dalam pengontrol) dan nyatakan kode di bawah ini pada html.

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

— KanhuP2012
sumber