jika ada pernyataan dalam template AngularJS

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?

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>

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>

Ternary adalah cara paling jelas untuk melakukan ini.

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>

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>

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>

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 "

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>

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

Anda dapat menggunakan arahan ng-if seperti di atas.

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

Pernyataan if If else

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