jika ada pernyataan dalam template AngularJS

702

Saya ingin melakukan suatu kondisi dalam template AngularJS. Saya mengambil daftar video dari Youtube API. Beberapa video dalam rasio 16: 9 dan beberapa dalam rasio 4: 3.

Saya ingin membuat kondisi seperti ini:

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

Saya mengulangi video menggunakan ng-repeat. Tidak tahu apa yang harus saya lakukan untuk kondisi ini:

  • Tambahkan fungsi dalam ruang lingkup?
  • Apakah itu di templat?
vzhen
sumber
2
Saya menemukan satu artikel ng-if di sini. goo.gl/wQ30uf
Virender

Jawaban:

1284

Angularjs (versi di bawah 1.1.5) tidak menyediakan if/elsefungsionalitas. Berikut adalah beberapa opsi untuk mempertimbangkan apa yang ingin Anda capai:

( Langsung ke pembaruan di bawah ini (# 5) jika Anda menggunakan versi 1.1.5 atau lebih tinggi )

1. Operator ternary:

Seperti yang disarankan oleh @Kirk dalam komentar, cara paling bersih untuk melakukan ini adalah dengan menggunakan operator ternary sebagai berikut:

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2. ng-switcharahan:

bisa digunakan seperti berikut ini.

<div ng-switch on="video">
    <div ng-switch-when="video.large">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

3. ng-hide/ ng-showarahan

Atau, Anda juga dapat menggunakan ng-show/ng-hidetetapi menggunakan ini sebenarnya akan membuat baik video besar dan elemen video kecil dan kemudian menyembunyikan yang memenuhi ng-hidesyarat dan menunjukkan yang memenuhi ng-showsyarat. Jadi pada setiap halaman Anda sebenarnya akan merender dua elemen yang berbeda.

4. Pilihan lain untuk dipertimbangkan adalah ng-classarahan.

Ini dapat digunakan sebagai berikut.

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

Di atas pada dasarnya akan menambahkan large-videokelas css ke elemen div jika video.largebenar.

UPDATE: Angular 1.1.5 memperkenalkanngIf directive

5. ng-ifarahan:

Pada versi di atas 1.1.5Anda dapat menggunakan ng-ifarahan. Ini akan menghapus elemen jika ekspresi yang disediakan kembali falsedan memasukkan kembali elementdi DOM jika ekspresi kembali true. Dapat digunakan sebagai berikut.

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>
Sebuah mitos
sumber
9
Seharusnya ng-switch on="video"sebaliknyang-switch-on="video"
czerasz
4
Bagaimana bisa begitu? if () {} else if () {} else if () {} else {} Tetapi termasuk dalam dom hanya satu elemen
falko
208
Juga ternary<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>
Kirk Strobeck
16
Perlu diingat bahwa ng-ifTIDAK akan menambahkan elemen terlampir ke DOM sampai kondisinya dievaluasi true, tidak seperti ng-hidedan ng-show.
Wilhelm Murdoch
1
Kenapa tidak sederhana saja ng-switch="video"? Beberapa masalah? atau tidak tersedia sebelumnya? Bagi saya ini berfungsi dengan baik
Sami
175

Dalam versi terbaru Angular (per 1.1.5), mereka telah menyertakan arahan bersyarat yang disebut ngIf. Ini berbeda dari ngShowdan ngHidedalam elemen tidak tersembunyi, tetapi tidak termasuk dalam DOM sama sekali. Mereka sangat berguna untuk komponen yang mahal untuk dibuat tetapi tidak digunakan:

<div ng-if="video == video.large">
    <!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
    <!-- code to render the regular video block -->
</div>
Brian Genisio
sumber
5
Perlu diingat bahwa ng-ifmemperkenalkan lingkup yang terisolasi , sehingga $parentmenjadi $parent.$parentdi tubuh ng-if.
David Salamon
142

Ternary adalah cara paling jelas untuk melakukan ini.

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
Oliver Dixon
sumber
Bagaimana melakukan ini dengan 2 kondisi di atau ?? seperti <div> {{A == B || A == C? 'varIsTrue': 'varIsFalse'}} </div>
YoBre
2
Bungkus (A == B || A == C)
Oliver Dixon
1
suka jawaban ini! Menggunakan ng- arahan memberikan banyak spasi html jika div tidak memenuhi syarat ..
sksallaj
48

Angular sendiri tidak menyediakan fungsionalitas if / else, tetapi Anda bisa mendapatkannya dengan memasukkan modul ini:

https://github.com/zachsnow/ng-elif

Dengan kata-katanya sendiri, itu hanya "kumpulan arahan aliran kontrol sederhana: ng-if, ng-else-if, dan ng-else." Mudah dan intuitif untuk digunakan.

Contoh:

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>
lpappone
sumber
1
saya tidak ingin mengulang kode dalam div lagi dan lagi.
1
Anda tidak perlu mengulangi apa pun - Anda bisa melakukannya dengan mudah ng-if="someCondition && someOtherCondition". Mungkin saya salah paham? (Saya menulis modul itu - harus berfungsi seperti ifdan elsedi JS).
Zach Snow
1
Ini adalah penyelamat mutlak. Ini harus menjadi bagian dari inti Angular, itu sangat diperlukan dalam pengkodean template. Jauh lebih bersih daripada memiliki operator ternary di semua tempat, dan mengatasi keterbatasan ng-switch yang tidak dapat mengevaluasi ekspresi.
Nico Westerdale
Terima kasih @NicoWesterdale! Juga, saya menambahkan versi ng-switch yang lebih kaya yang mungkin berguna bagi Anda: github.com/zachsnow/ng-cases
Zach Snow
30

Anda bisa menggunakan video.yt$aspectRatioproperti Anda secara langsung dengan melewatkannya melalui filter, dan mengikat hasilnya ke atribut ketinggian di templat Anda.

Filter Anda akan terlihat seperti:

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

Dan templatnya adalah:

<video height={{video.yt$aspectRatio | videoHeight}}></video>
Noah Freitas
sumber
Bagaimana dengan kode Anda saat video.yt$aspectRatiokosong atau tidak terdefinisi? Apakah mungkin untuk menerapkan nilai default?
Fractaliste
13

Dalam hal ini Anda ingin "menghitung" nilai piksel tergantung pada properti objek.

Saya akan mendefinisikan fungsi dalam pengontrol yang menghitung nilai piksel.

Di controller:


$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

Kemudian di template Anda, Anda cukup menulis:


element height="{{ GetHeight(aspect) }}px "
Spock
sumber
11

Saya setuju bahwa ternary sangat bersih. Tampaknya itu sangat situasional meskipun karena kadang-kadang saya perlu menampilkan div atau p atau tabel, jadi dengan sebuah tabel saya tidak suka terner karena alasan yang jelas. Melakukan panggilan ke suatu fungsi biasanya ideal atau dalam kasus saya saya melakukan ini:

<div ng-controller="TopNavCtrl">
        <div ng-if="info.host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>
Tom Stickel
sumber
4
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

Anda dapat menggunakan arahan ng-if seperti di atas.

JBhardwaj
sumber
3

Kemungkinan untuk Angular: Saya harus menyertakan pernyataan if - di bagian html, saya harus memeriksa apakah semua variabel dari URL yang saya hasilkan didefinisikan. Saya melakukannya dengan cara berikut ini dan itu tampaknya merupakan pendekatan yang fleksibel. Saya harap ini akan bermanfaat bagi seseorang.

Bagian html di templat:

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

Dan bagian naskah:

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

Terima kasih dan salam,

Jan

Jan Clemens Stoffregen
sumber
2
Tampak lebih seperti Angular daripada AngularJS.
pzaenger
@ pzaenger, ya, tapi banyak jawaban untuk pertanyaan ini cocok untuk keduanya, jadi saya pikir beberapa orang, seperti saya, tetap melihat jawabannya. Tolong beri tahu saya jika Anda keberatan.
Jan Clemens Stoffregen
2
Baik. Setidaknya Anda harus menyebutkan ini dalam jawaban Anda.
pzaenger
@ pzaenger, terima kasih atas petunjuk ini, saya sebutkan sekarang.
Jan Clemens Stoffregen
1

Pernyataan if If else

ng-if="receiptData.cart == undefined ? close(): '' ;"
Aamir Anwar
sumber