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

Jawaban:

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