web-dev-qa-db-ja.com

未定義の式値のAngularJSでプレースホルダーを表示する方法は？

式{{ x }}があり、xがundefinedまたはnullである場合、そのプレースホルダーを表示するにはどうすればよいですか？

私は答えで1つの解決策を提供しましたが、他にどのような方法があるのか​​知りたいです。たぶん、約束のプレースホルダーにも。

javascriptangularjsplaceholder
61
JustGoscha

{{ counter || '?'}}。純粋なjavascriptです。 ||はデフォルト値として使用できます。それぞれが異なる空のメッセージになるため、一般化されたディレクティブは多くの場合に適していません。

空のクラスに別のクラスを適用する場合、それもビルトインです：

<div ng-class="{empty: !counter}" ng-bind="counter || ?"></div>
96
Umur Kontacı

私はこのようにしますが、おそらくもっと良い方法があります：

angular.module('app').filter('placeholdEmpty', function(){
  return function(input){
    if(!(input == undefined || input == null)){
      return input;
    } else {
      return "placeholder";
    }
  }
});

そして、{{ x | placeholdEmpty}}

25
JustGoscha

私は次のようにng-showでそれを行います：

<strong>{{username}}</strong>
<span class="empty" ng-show="!username">N/A</span>

確かに、ビューにもっと多くの要素が追加され、異なる方法で処理できる可能性があります。プレースホルダー/空の値がどこにあるかを明確に確認するのがどれほど簡単かは好きですが、それらを別のスタイルにすることもできます。

13
jszobody

defaultフィルターを実装します。

app.filter('default', function(){
  return function(value, def) {
    return (value === undefined || value === null? def : value);
  };
});

そしてそれを次のように使用します：

{{ x | default: '?' }}

{{ x || '?'}}に対するフィルターソリューションの利点は、undefined、null、または0を区別できることです。

5
naXa

デフォルトのようなフィルターの実装は機能しますが、数字のみを使用している場合は、角度の独自の 数字フィルター を使用できます

入力がnullまたは未定義の場合、単に返されます。入力が無限（Infinityまたは-Infinity）の場合、それぞれ無限記号 '∞'または '-∞'が返されます。入力が数値ではない場合、空の文字列が返されます。

{{ (val | number ) || "Number not provided"}}
2
rastasheep