web-dev-qa-db-ja.com

angular.jsのインライン条件式

Ng-showなどを使用する以外に、条件付きでコンテンツを表示する方法があるのではないかと思っていました。

<% if (myVar === "two") { %> show this<% } %>

しかし角度的には、HTMLタグで囲まれたものの表示と非表示に限定されるようです。

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

HTMLタグでコンテンツをラップするのではなく、{{}}を使用してインラインコンテンツを条件付きで角度付きで表示および非表示にする、角度付きの推奨方法は何ですか？

angularjsif-statementternary-operator
187
user1469779

編集： 2Toadの答えは下記 です。そのことを投票する

あなたがAngular <= 1.1.4を使っているなら、この答えはするでしょう：

これに対するもう一つの答え。それは可能な解決策のリストというよりは、解決策に対する「正確な」試みであるためです。

これが「即時if」（別名iif）を実行するフィルタです。

app.filter('iif', function () {
   return function(input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
   };
});

そしてこのように使用することができます：

{{foo == "bar" | iif : "it's true" : "no, it's not"}}
133
Ben Lesh

Angular 1.1.5 に3項演算子のサポートが追加されました。

{{myVar === "two" ? "it's true" : "it's false"}}
710
2Toad

この猫の皮をむく方法はたくさんあります。 {{}}の間について具体的に質問していることは理解できますが、ここに来る他の人にとっては、他の選択肢のいくつかを示す価値があると思います。

あなたの$スコープで機能します（IMO、これはほとんどのシナリオであなたの最善の策です）：

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

 <span>{{showSomething(foo)}}</span>

ng-showとng-hideはもちろんです。

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

ベルトランが提案したカスタムフィルター。 （何度も何度も同じことをしなければならない場合、これがあなたの最良の選択です）

app.filter('myFilter', function() {
   return function(input) {
     return input == 1 ? 'Foo' : 'Bar';
   }
}

{{foo | myFilter}}

またはカスタムディレクティブ：

app.directive('myDirective', function() {
   return {
     restrict: 'E',
     replace: true,
     link: function(scope, elem, attrs) {
       scope.$watch(attrs.value, function(v) {
          elem.text(v == 1 ? 'Foo': 'Bar');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

個人的には、ほとんどの場合、私は自分のスコープ内の関数を使っていますが、それによってマークアップがかなりきれいに保たれ、そしてそれは素早く簡単に実装することができます。それ以外の場合は、同じ正確なことを何度も何度も繰り返すことにはなりません。その場合は、状況に応じてBertrandの提案に従って、フィルタまたはディレクティブを作成します。

いつものように、最も重要なことはあなたの解決策が保守しやすいことであり、うまく行けばテストできるということです。そしてそれはあなたの特定の状況に完全に依存することになるでしょう。

60
Ben Lesh

私は、ng-classが使えないとき（例えば、SVGをスタイリングするとき）に、条件付きでクラスattrを設定するために以下を使っています。

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

同じアプローチが他の属性タイプにも機能するはずです。

（ng-attr-を使うには、最新の不安定版Angularを使用する必要があると思います。現在は1.1.4です）

私はAngularJS + SVGでの作業に関する記事を公開しました。 http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

18
Ashley Davis

可変内容をチェックし、デフォルトのテキストを使用するには、次のものを使用できます。

<span>{{myVar || 'Text'}}</span>
15
ezequielc

私があなたをよく理解していれば、私はあなたにそれをする2つの方法があると思います。

最初に ngSwitch を試すことができ、2番目に可能な方法はあなた自身の フィルタを作ることです おそらくngSwitchが正しいアプローチですが、インラインコンテンツを非表示にしたり表示したりする場合は、{{}}フィルタを使用することをお勧めします。

例として単純なフィルタを使った フィドル があります。

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

angular.module('exapleOfFilter', []).
  filter('isHello', function() {
    return function(input) {
      // conditional you want to apply
      if (input === 'hello') {
        return input;
      }
      return '';
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}
3
Bertrand

Angular UIライブラリには、テンプレート/ビュー内の条件用の組み込みディレクティブui-ifがあります。

例：Angular UIからUI 1.1.4までのサポート

<div ui-if="array.length>0"></div>

ng-ifが1.1.4以降のすべての角度バージョンで利用可能

<div ng-if="array.length>0"></div>

配列変数にデータがある場合はdivだけが表示されます

3
JQuery Guru

値が "0"のときに "None"を表示したい場合は、次のように使用します。

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

または角度jsのtrue false

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>
2
Rizo

だからAngular 1.5.1（他のMEANスタックの依存関係に既存のアプリの依存関係があったので、私は現在1.6を使っていません4）

これは私にとって{{myVar === "two" ? "it's true" : "it's false"}}と言っているOPのように働きます

{{vm.StateName === "AA" ? "ALL" : vm.StateName}}
2
Tom Stickel

エキゾチックな状況でも動作します：

<br ng-show="myCondition == true" />
1
Steffomio

私はミックスに私のものを投げます：

https://Gist.github.com/btm1/6802312

これはif文を1回評価して監視リスナを追加しませんが、set-ifというwait-for = "somedata.prop"という要素に追加の属性を追加することができますifステートメントを1回評価します。 XHRリクエストからのデータを待っているのであれば、この追加の属性はとても便利です。

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });
0
btm1