angularjs - HTML でデフォルト値を ng-bind に設定する

Question

ng-bind によって取得されるデフォルト値をスコープに設定したいと思います。私はこれを次のようにやっています：

<button>Show <span data-ng-bind="data.text" data-ng-init="data.text = 'All';"></span> Names</button>

この例では、ページの読み込み時にスパンが innerHTML = 'All' に設定されます。

ただし、 ng-init を使用せずにこれを行う方法があることを望んでいました。おそらく次のようなものです。

<button>Show <span data-ng-bind="data.text = 'All';"></span> Names</button>

score 18 · Accepted Answer

コントローラーで:

$scope.data = {};
$scope.data.text = "All";

あなたのマークアップ:

<button>Show <span data-ng-bind="data.text"></span> Names</button>

または、コントローラーのコードをスキップしたい場合 (Kohjah Breese のコメントによる):

    <button>Show <span data-ng-bind="data.text || 'All'"></span> Names</button>

おそらく、コントローラーの他の場所にこの値を切り替えるコードがいくつかあるでしょうが、初期化の目的でそうすべきです。

編集:代わりに、コメントで tymeJV が指摘しているように (ng-cloak が追加されたため、{{}} 構文はユーザーに表示されません):

<button>Show <span ng-cloak>{{data.text || "All"}}</span> Names</button>

score 5 · Accepted Answer

この||演算子はngBind、純粋な JavaScript と同様に機能します。

<span ng-bind="myVariable || 'My default value'"></span>

これmyVariableは、変数が満たされている場合に出力し、そうでない場合は代替'My default value'が使用されます。

3 に答える 3