202

ng-show などを使用する以外に、コンテンツを条件付きで表示する角度のある方法があるかどうか疑問に思っていました。たとえば、backbone.js では、次のようなテンプレートでインライン コンテンツを使用して何かを行うことができます。

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

しかし、Angularでは、htmlタグでラップされたものの表示と非表示に制限されているようです

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

コンテンツをhtmlタグでラップするのではなく、{{}}を使用するだけでインラインコンテンツをAngularで条件付きで表示および非表示にする推奨方法は何ですか?

4

12 に答える 12

140

編集:以下の 2Toad の回答は、あなたが探しているものです! そのことに賛成票を投じる

Angular <= 1.1.4 を使用している場合、この回答は次のようになります。

これに対するもう1つの答え。別の回答を投稿しています。これは、可能な解決策のリストというよりも、解決策の「正確な」試みであるためです。

「即時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"}}
于 2013-01-04T21:43:56.570 に答える
61

この猫の皮を剥ぐ方法は何千もあります。具体的に {{}} の間について質問されていることは承知していますが、ここに来る他の人のために、他のオプションのいくつかを示す価値があると思います。

$scope で機能します（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 の提案に従い、状況に応じてフィルターまたはディレクティブを作成します。

いつものように、最も重要なことは、ソリューションが保守しやすく、できればテスト可能であることです。そして、それはあなたの特定の状況に完全に依存するでしょう.

于 2013-01-04T21:33:21.047 に答える
15

変数の内容をチェックし、デフォルトのテキストを持っている場合は、次を使用できます。

<span>{{myVar || 'Text'}}</span>
于 2014-11-03T10:58:16.030 に答える
3

私があなたをよく理解していれば、あなたにはそれを行う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';
}
于 2013-01-04T21:03:09.503 に答える
1

エキゾチックな状況でも機能します:

<br ng-show="myCondition == true" />
于 2016-04-16T10:21:51.080 に答える