Set Default Value to ng-bind in HTML

angularjs angularjs-ng-init ng-bind
Kohjah Breese picture Kohjah Breese · Sep 11, 2014 · Viewed 14.9k times · Source

I'd like to set a default value to scope, which is picked up by ng-bind. I am doing this like:

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

In this example, the span is set to innerHTML = 'All' when the page loads.

However, I was hoping there might be a way to do this without requiring the use of ng-init, maybe something like:

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

Answer

MrBoJangles picture MrBoJangles · Sep 11, 2014

In your controller:

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

Your markup:

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

Or, if you want to skip the controller code (courtesy of Kohjah Breese' comment):

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

Presumably there will be some code elsewhere in your controller that will toggle this value, but for the purposes of initializing, that should do.

EDIT: Alternately, as tymeJV points out in the comments (ng-cloak added so {{}} syntax doesn't display to users):

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

Related questions

setting Angular select ng-init to first value in array

I have a simple select element that I am trying to enforce a value being present to submit the form and I have tried both setting the required attribute as well as using ng-init to ensure there is a value …

Read More
Pass parameter to Angular ng-include

I am trying to display a binary tree of elements, which I go through recursively with ng-include. What is the difference between ng-init="item = item.left" and ng-repeat="item in item.left" ? In this example it behaves exactly the same, …

Read More
Angular passing scope to ng-include

I have a controller that I wrote that I use in multiple places in my app with ng-include and ng-repeat, like this: <div ng-repeat="item in items" ng-include="'item.html'" ng-controller="ItemController" ></div> In the controller/…

Read More