CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Krishna Modi
Krishna Modi

Reputation: 397

Data binding not working in AngularJS with input tag

Below is my angularjs code, When I try to enter any text in the textbox, it doesn't appear in the binding.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="js/angular.js"></script>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('cont', ['$scope', function($scope) {
    }]);
    </script>
</head>
<body ng-app="myApp">
    <input type="text" ng-bind="user"></input>
    <p>{{user}}</p>
</body>
</html>

Upvotes: 1

Views: 3470

Answers (1)

PSL
PSL

Reputation: 123739

You would need to use ng-model directive for 2-way binding. ng-bind is just one-way which updates the bound element with data (model value) when a digest cycle happens. Without ng-model when you update the textbox there wont be any digest cycle. Angular has directive definition for types like input and other form controls which requires optional ng-model directive. And these element directives registers events like change/input etc only if it gets the optional ng-model controller on the target element. And when you have them it uses ng-model controller to set the view-value, model-value and triggers the digest cycle when that event occurs. Of course with the new angular versions there is an ng-model-options which you can set at the element level or at a global level to specify when do you want the model value update (and form validation) to happen.

So do:-

<input type="text" ng-model="user" name="user"></input>
<p>{{user}}</p>

Though not an issue in your case, you are missing the usage of ng-controller="cont". Without it all properties will be attached to the rootScope in your case. So may be:

<body ng-app="myApp">
  <div ng-controller="cont">
    <input type="text" ng-model="user" name="user"></input>
    <p>{{user}}</p>
  </div>
</body>

Upvotes: 3

Related Questions