web-dev-qa-db-ja.com

スコープ変数がAngularJSテンプレートで未定義であるかどうかを確認するにはどうすればよいですか？

スコープ変数がndefinedであるかどうかを確認する方法

これは動作しません：

<p ng-show="foo == undefined">Show this if $scope.foo == undefined</p>
angularjsangularjs-ng-show
53
Sebastian Barth

これを行う最もクリーンな方法を次に示します。

<p ng-show="{{foo === undefined}}">Show this if $scope.foo === undefined</p>

コントローラにヘルパー関数を作成する必要はありません！

65
JLewkovich

undefinedを使用して決定を下すことは、通常、Javascriptの設計不良の兆候です。別のことを検討することもできます。

ただし、あなたの質問に答えるには：ヘルパー関数を追加するのが最善の方法だと思います。

$scope.isUndefined = function (thing) {
    return (typeof thing === "undefined");
}

およびテンプレート内

<div ng-show="isUndefined(foo)"></div>
24
Umur Kontacı

修正済み：

HTML

  <p ng-show="getFooUndef(foo)">Show this if $scope.foo === undefined</p>

JS

$scope.foo = undefined;

$scope.getFooUndef = function(foo){
    return ( typeof foo === 'undefined' );
}

フィドル： http://jsfiddle.net/oakley349/vtcff0w5/1/

9
Oakley

fooがブール変数ではないの場合、これは機能します（つまり、その変数にデータがあるときにこれを表示したい）：

<p ng-show="!foo">Show this if $scope.foo is undefined</p>

そしてその逆：

<p ng-show="foo">Show this if $scope.foo is defined</p>

3
Naguib Ihab

Angularの動作が変更されたため、新しい回答を投稿します。次のコードが機能するため、少なくとも1.5の時点で、未定義との等価性のチェックがangular式で機能するようになりました。

ng-if="foo !== undefined"

このng-ifがtrueに評価されると、適切なスコープからpercentsプロパティを削除し、$ digestを呼び出すと、期待どおりにドキュメントから要素が削除されます。

3
Tahsis Claus

二重パイプ操作を使用して、afterステートメントで値が未定義かどうかを確認できます。

<div ng-show="foo || false">
    Show this if foo is defined!
</div>
<div ng-show="boo || true">
    Show this if boo is undefined!
</div>

デモについてはJSFiddleを確認してください

ダブルパイプの技術的な説明については、次のリンクをご覧ください。 https://stackoverflow.com/a/34707750/6225126

1
Mahdi Fathalla

@impulsgrawが書いたように。パイプの後に未定義をチェックする必要があります。

<div ng-show="foo || undefined">
    Show this if foo is defined!
</div>
<div ng-show="boo || !undefined">
    Show this if boo is undefined!
</div>

https://jsfiddle.net/mjfz2q9h/11/

1
D-Unit

Angular 1を使用している場合、Angularの組み込みメソッドを使用することをお勧めします。

angular.isDefined（value）;

参照： https://docs.angularjs.org/api/ng/function/angular.isDefined

1
Syed Usman