複数の条件を持つAngularJS ng-if


151

次のようなものが可能かどうかを知りたいです。

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

アイテムがリクエストを通じて受信したJSONコンテナーであることを知っているため、キーと値のメソッドを使用しています。

ありがとう

私はそれをグーグルで試したので私は尋ねています、しかし私が得ることができる唯一の結果はでしたがng-switch、私は使用しなければなりませんng-if


3
JavaScriptでは、or演算子は||です。
JB Nizet 2013年

回答:


194

できますよ。何かのようなもの:

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'];

デモフィドル


20個の入力フィールドがあり、すべてのフィールドが入力されている場合にのみ送信ボタンを有効にする必要がある場合。この場合、非常に多くの条件を含める必要があります。これは少し混乱します。他に実行可能な解決策はありますか?
Mr_Perfect 2016

@CharanCherry角度形式の検証を調べます。これにより、必要なすべてのフィールドをng-requiredに設定し、送信ボタンのng-disabled式などでフォームの有効性を確認できます。CFR fdietz.github.io/recipes-with-angular-js/using-forms/...
GeckoのIT

76

OR演算子:

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

読むのは簡単ですが、開発者としては、「a」「k」「b」などよりも優れた名前を使用してください。

例えば:

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

別のORの例

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

AND演算子 (OR条件ではなくAND条件を探してこのスタックオーバーフローの回答を偶然見つけた場合)

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

わかりましたので、すべてのブラウザがを&有効な文字として認識しているようです。ただし&、属性での使用は有効なhtmlではないことに注意してください。より具体的には、< html.spec.whatwg.org/multipage/syntax.html#syntax-attributes >を参照してください。 」この回答もご覧ください:< stackoverflow.com/a/5320217/788553 >。
jmlopez 2015年

htmlで複合ステートメントを使用して角度のある作業を行う必要がある場合、複合ステートメントをスコープに接続された関数に入れ、そのロジックをhtmlセクションから削除することをお勧めします。
jmlopez 2015年

HTML5はAngularを考慮して書かれていません。代わりに、グーグルの優秀な人たちが代わりにAngularを作成しました-仕様を利用して、「&」でAngular式を書くのはごく普通のことです。確かに、私はasp.net MVCでRazor Viewページを実行するときと同じように、ビジネスルールをビューに配置しないことを好みますが、私の答えは、質問のコンテキスト内に完全にあります。
トムスティッケル2015年

1
あなたの答えのトムには何も問題はありません。私もあなたが示すような複合文を書きます。私は怠惰(または急いでいる)ので、それは機能します。しかし、私はいつも、脱出に関するこの規則を覚えています&。これが私があなたの答えに出くわした理由です。「HTML5はAngularを念頭に置いて作成されたのではない」とおっしゃったように、これらのリンクをそこに配置して、人々にHTML仕様を認識させたかっただけです。
jmlopez 2015年

1

また、両方の条件が作業よりも真である場合は、必須条件として&&を試すこともできます

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

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

0

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

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>

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";
}
}

答えを1つにまとめて、もう1つを削除していただけませんか。
トムM
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.