angularjs - ng-if、等しくない?

Question

値のリストを表示する単純な ng-reapt があります。一部の出力では、DIV を表示/非表示にする ng-if がいくつかあります。

HTML:

<div ng-repeat="details in myDataSet">

    <p>{{ details.Name }}</p>
    <p>{{ details.DOB  }}</p>

       <div ng-if="details.Payment[0].Status == '0'">
           <p>No payment</p>
       </div>

       <div ng-if="details.Payment[0].Status == '1' || details.Payment[0].Status == '2'">
           <p>Late</p>
       </div>

       <div ng-if="details.Payment[0].Status == '3' || details.Payment[0].Status == '4' || details.Payment[0].Status == '5'">
           <p>Some payment made</p>
       </div>

       <div ng-if="details.Payment[0].Status == '6'">
           <p>Late and further taken out</p>
       </div>

       <div ng-if="details.Payment[0].Status != '0' || details.Payment[0].Status != '1' || details.Payment[0].Status != '2' || details.Payment[0].Status != '3' || details.Payment[0].Status != '4' || details.Payment[0].Status != '5' || details.Payment[0].Status != '6'">
           <p>Error</p>
       </div>

    <p>{{ details.Gender}}</p>

</div>

セクションを表示しようとすると、アプリケーションでエラーが表示されます!=。

score 12 · Accepted Answer

フィルターを使用した気の利いたソリューションを次に示します。

app.filter('status', function() {

  var statusDict = {
    0: "No payment",
    1: "Late",
    2: "Late",
    3: "Some payment made",
    4: "Some payment made",
    5: "Some payment made",
    6: "Late and further taken out"
  };

  return function(status) {
    return statusDict[status] || 'Error';
  };
});

マークアップ:

<div ng-repeat="details in myDataSet">
  <p>{{ details.Name }}</p>
  <p>{{ details.DOB  }}</p>
  <p>{{ details.Payment[0].Status | status }}</p>
  <p>{{ details.Gender}}</p>
</div>

score 3 · Accepted Answer

これを試して：

ng-if="details.Payment[0].Status != '6'".

申し訳ありませんが、ng-show または ng-hide を使用できると思います。

score 2 · Accepted Answer

以下の解決策を試してください

ng-if="details.Payment[0].Status != '0'"

Use below condition(! prefix with true condition) instead of above

ng-if="!details.Payment[0].Status == '0'"

score 1 · Accepted Answer

私は「ハック」が好きではありませんが、締め切りのピンチでこれを行いました

<li ng-if="edit === false && filtered.length === 0">
    <p ng-if="group.title != 'Dispatcher News'" style="padding: 5px">No links in group.</p>
</li>

はい、別の内部ネストされた ng-if があります。1 行に条件が多すぎるのが気に入らなかっただけです。

score 0 · Accepted Answer

ここにはかなり良い解決策がありますが、問題が実際に発生する理由を理解するのに役立ちません.

しかし、それは非常に単純です。論理 OR がどのように機能するかを理解する必要があるだけです||。trueいずれかの側がに評価されると、式全体がに評価されtrueます。

それでは、あなたのケースを見てみましょう。全体details.Payment[0].StatusがStatusであり、簡潔にするための数字であると仮定します。次に、がありStatus != 0 || Status != 1 || ...ます。

想像してみてくださいStatus = 1:

( 1 != 0 || 1 != 1 || ... ) =
(  true  || false  || ... ) =
(       true       || ... ) = ... = true

想像してみてくださいStatus = 0：

( 0 != 0 || 0 != 1 || ... ) =
( false  ||  true  || ... ) =
(       true       || ... ) = ... = true

最初の 2 つの式の...論理として、完全な式の結果となるものが得られるため、何を持っているかは問題ではありません。ORtrue

実際に必要なのは、両辺がAND &&である場合にのみ true となる論理値です。true

angularjs - ng-if、等しくない?

8 に答える 8

Related

Reference