javascript - 未定義の式の値のプレースホルダーをAngularJSに表示するにはどうすればよいですか？

Question

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

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

Answer 1

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

空のクラスに別のクラスを適用する場合は、それも組み込まれています。

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

Answer 2

私はこのようにしますが、もっと良い方法があるかもしれません：

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

その後、{{ x | placeholdEmpty}}

Answer 3

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

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

確かに、それは私が別の方法で処理できるかもしれない私のビューにもっと多くの要素を追加します。プレースホルダー/空の値がどこにあるかを明確に確認するのがいかに簡単であるかが気に入っています。また、スタイルを変えることもできます。

Answer 4

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

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

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

{{ x | default: '?' }}

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

Answer 5

デフォルト風のフィルターの実装は機能しますが、数値のみを使用している場合は、Angular独自の数値フィルターを使用できます

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

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