anil chean anil chean - 2 months ago 15
AngularJS Question

How to populate a text box using ng-bind?

I'm new to AngularJS and I am going through this link and I am curious to do the experiment on a text box control using ng-bind. But it is not working.

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>

<input type ="text" ng-bind="name" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>


How can I populate a text box using ng-bind?

Answer

As, The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes, you will not be able to bind to an input box:

<input type ="text" ng-bind="name" />

You can instead use ng-value

<input type="text" ng-value="name" />

or you can populate your input box using the model within the value attribute.

<input type="text" value="{{name}}" />

See this codepen