AngularJS ng-if dengan berbagai kondisi


151

Saya ingin tahu apakah mungkin memiliki sesuatu seperti ini:

div ng-repeat="(k,v) in items"
<div ng-if="k == 'a' || k == 'b'">
    <!-- SOME CONTENT -->
</div>

Mengetahui bahwa item adalah wadah JSON yang diterima melalui permintaan, jadi itu sebabnya saya menggunakan metode nilai kunci.

Terima kasih

Saya bertanya karena saya sudah mencoba googling, tetapi satu-satunya hasil yang bisa saya dapatkan adalah dengan ng-switch, tetapi saya harus menggunakannya ng-if.


3
Dalam JavaScript, operator atau adalah ||.
JB Nizet

Jawaban:


194

Tentu kamu bisa. Sesuatu seperti:

HTML

<div ng-controller="fessCntrl">    
     <label ng-repeat="(key,val) in list">
       <input type="radio" name="localityTypeRadio" ng-model="$parent.localityTypeRadio" ng-value="key" />{{key}}
         <div ng-if="key == 'City' || key == 'County'">
             <pre>City or County !!! {{$parent.localityTypeRadio}}</pre>
         </div>
         <div ng-if="key == 'Town'">
             <pre>Town!!! {{$parent.localityTypeRadio}}</pre>
         </div>        
      </label>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.list = {
        City: [{name: "cityA"}, {name: "cityB"}],
        County: [{ name: "countyA"}, {name: "countyB"}],
        Town: [{ name: "townA"}, {name: "townB"}]
      };

    $scope.localityTypeRadio = 'City';
});

fessmodule.$inject = ['$scope'];

Demo Fiddle


Jika saya memiliki 20 bidang input dan saya harus mengaktifkan tombol kirim hanya jika semua bidang diisi. Dalam hal ini, saya harus memasukkan banyak syarat. Ini sedikit membingungkan. Apakah ada solusi lain yang layak?
Mr_Perfect

@CharanCherry Lihatlah ke validasi bentuk sudut. Dengan begitu Anda dapat mengatur semua bidang yang diinginkan dan diperlukan untuk memeriksa validitas formulir misalnya ekspresi yang dinonaktifkan di tombol kirim. CFR fdietz.github.io/recipes-with-angular-js/using-forms/...
Gecko IT

76

ATAU operator:

<div ng-repeat="k in items">
    <div ng-if="k || 'a' or k == 'b'">
        <!-- SOME CONTENT -->
    </div>
</div>

Meskipun cukup sederhana untuk dibaca, saya harap sebagai pengembang Anda menggunakan nama yang lebih baik daripada 'a' 'k' 'b' dll.

Sebagai contoh:

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin || group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Contoh ATAU lainnya

<p ng-if="group.title != 'Dispatcher News' or group.title != 'Coordinator News'" style="padding: 5px;">No links in group.</p>

DAN operator (Bagi mereka yang tersandung jawaban stackoverflow ini mencari kondisi AND alih-alih ATAU)

<div class="links-group" ng-repeat="group in groups" ng-show="!group.hidden">
    <li ng-if="user.groups.admin && group.title == 'Home Pages'"> 
        <!--Content-->
    </li>
</div>

Oke, jadi semua browser tampaknya mengenali &karakter yang valid. Tetapi harus disebutkan bahwa menggunakan &atribut bukan html yang valid. Lihat < html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >, lebih khusus lagi: "Nilai atribut adalah campuran teks dan referensi karakter, kecuali dengan batasan tambahan bahwa teks tidak dapat berisi teks ambigu yang ambigu. " Lihat juga jawaban ini: < stackoverflow.com/a/5320217/788553 >.
jmlopez

Jika kita harus menggunakan pernyataan majemuk dalam html untuk membuat kerja sudut, saya lebih suka untuk menempatkan pernyataan majemuk ke dalam fungsi yang terlampir pada cakupan, sehingga menghilangkan logika itu dari bagian html.
jmlopez

HTML5 tidak ditulis dengan mengingat sudut pandang. Alih-alih orang-orang brilian di google menulis Angular sebagai gantinya - mengambil keuntungan dari spesifikasi dan dengan demikian menulis Ekspresi Angular dengan "&" sangat normal. Tentu, saya lebih suka untuk tidak memasukkan aturan bisnis dalam tampilan, sama seperti ketika saya melakukan halaman Razor View di asp.net MVC, tetapi jawaban saya sepenuhnya dalam konteks pertanyaan yang diajukan.
Tom Stickel

1
Tidak ada yang salah dengan jawaban Anda Tom, saya juga menulis pernyataan majemuk seperti yang Anda tunjukkan karena saya malas (atau terburu-buru), dan itu berhasil. Tapi kemudian saya selalu ingat aturan tentang melarikan diri ini &. Inilah alasan saya menemukan jawaban Anda. Saya hanya ingin meletakkan tautan itu di sana untuk membuat orang sadar akan spesifikasi HTML, seperti yang Anda katakan, "HTML5 tidak ditulis dengan mengingat Angular".
jmlopez

1

Anda juga dapat mencoba dengan && untuk konstelasi wajib jika kedua kondisi tersebut benar daripada berfungsi

//div ng-repeat="(k,v) in items"

<div ng-if="(k == 'a' &&  k == 'b')">
    <!-- SOME CONTENT -->
</div>

0

Kode JavaScript

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

0

Kode HTML

<div ng-app>
<div ng-controller='ctrl'>
    <div ng-class='whatClassIsIt(call.state[0])'>{{call.state[0]}}</div>
    <div ng-class='whatClassIsIt(call.state[1])'>{{call.state[1]}}</div>
    <div ng-class='whatClassIsIt(call.state[2])'>{{call.state[2]}}</div>
    <div ng-class='whatClassIsIt(call.state[3])'>{{call.state[3]}}</div>
    <div ng-class='whatClassIsIt(call.state[4])'>{{call.state[4]}}</div>
    <div ng-class='whatClassIsIt(call.state[5])'>{{call.state[5]}}</div>
    <div ng-class='whatClassIsIt(call.state[6])'>{{call.state[6]}}</div>
    <div ng-class='whatClassIsIt(call.state[7])'>{{call.state[7]}}</div>
</div>

Kode JavaScript

function ctrl($scope){
$scope.call={state:['second','first','nothing','Never', 'Gonna', 'Give', 'You', 'Up']}


$scope.whatClassIsIt= function(someValue){
     if(someValue=="first")
            return "ClassA"
     else if(someValue=="second")
         return "ClassB";
    else
         return "ClassC";
}
}

Bisakah Anda menggabungkan jawaban Anda menjadi satu dan menghapus yang lain?
Tom M
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.