CODEWITHSUNDEEP
javascripthtmlangularjs
Ankur Marwaha
Ankur Marwaha

Reputation: 1885

Difference between ng-model and angular expression - {{}}

{{}} is working fine but ng-model is not, at the same place.

I am using the following html-

<body ng-app="crud">
  Gray input fields will not be visible.
  <div ng-controller="ctrl">
    <input type="text" value="sdf" ng-model="asdf"/>
    <h1 ng-model="asdf"></h1>   <!-- this doesn't work-->
    <h1>{{asdf}}</h1>           <!-- this work-->
    </div>
  </div>
</body>

asdf is defined in this js app like this

 var app = angular.module("crud", []);
 app.controller("ctrl", ['$scope', function($scope) {
     $scope.asdf="ankur";
 }]);

Can someone explain why is it so ?

Upvotes: 5

Views: 1393

Answers (5)

Abdul Mateen Mohammed
Abdul Mateen Mohammed

Reputation: 1894

The ng-model directive is to be used on the input fields such as input, select for two way data binding and to get an input from a user.

Where as the one way data binding expression {{}} or ng-bind directive is used to output the data in the view.

var app = angular.module("crud", []);
app.controller("ctrl", ['$scope', function($scope) {
    $scope.asdf="ankur";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="crud">
  Gray input fields will not be visible.
  <div ng-controller="ctrl">
    <input type="text" value="sdf" ng-model="asdf"/>
    <h1 ng-bind="asdf"></h1>
    <h1>{{asdf}}</h1>
  </div>
</div>

Upvotes: 5

User
User

Reputation: 1363

ng-model : This directive binds the values of AngularJS application data to HTML input controls.

{{}} This use For Printing purpose only. you can put expression also like {{2*2}} it prints 4

Refer This for study basic syntax https://angularjs.org/

Upvotes: 0

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1065

According the doc

the ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

so you will not use it for display an H1

For the brackets they will be dirty checked and refreshed in every $digest, even if it's not necessary. So it's slower. Plus thez may appear while your angularjs is bootstrapping

Upvotes: 0

Wtower
Wtower

Reputation: 19912

From documentation:

The ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

You are trying to use it on a <h1>. Use ng-bind instead.

Upvotes: 0

Artem K.
Artem K.

Reputation: 804

Use ng-bind for display purposes, instead of ng-model.

<h1 ng-bind="asdf"></h1>

You only want to use ng-model when binding to an element that will be editing the variable, such as a text field.

Upvotes: 0

Related Questions