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で条件付きで表示および非表示にする推奨方法は何ですか?
これに対するもう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"}}
この猫の皮を剥ぐ方法は何千もあります。具体的に {{}} の間について質問されていることは承知していますが、ここに来る他の人のために、他のオプションのいくつかを示す価値があると思います。
$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>
<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 の提案に従い、状況に応じてフィルターまたはディレクティブを作成します。
いつものように、最も重要なことは、ソリューションが保守しやすく、できればテスト可能であることです。そして、それはあなたの特定の状況に完全に依存するでしょう.
変数の内容をチェックし、デフォルトのテキストを持っている場合は、次を使用できます。
<span>{{myVar || 'Text'}}</span>
私があなたをよく理解していれば、あなたにはそれを行う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';
}
エキゾチックな状況でも機能します:
<br ng-show="myCondition == true" />