web-dev-qa-db-ja.com

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

デフォルト値をscopeに設定したいのですが、これは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>
angularjsangularjs-ng-initng-bind
17
Kohjah Breese

コントローラで：

$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>
18
MrBoJangles

||演算子は、純粋なJavaScriptのようにngBindでも機能します。

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

これは、変数が入力されている場合はmyVariableを出力し、それ以外の場合は代替の'My default value'が使用されます。

4
flori

from angularjs doc ：

NgInitの唯一の適切な使用は、ngRepeat [...]の特別なプロパティをエイリアスすることです。この場合に加えて、スコープの値を初期化するには、ngInitではなくコントローラーを使用する必要があります。

だから私はあなたのコントローラーでdata.textを初期化することはangularjsにとっては問題ないと思います

2
Logar