Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 594
Ankur Marwaha Avatar asked Aug 18 '16 05:08

Ankur Marwaha


People also ask

What is the difference between ng-model and data NG model?

The answer is: (ngModel) causes a 1-way data-binding, whereas [(ngModel)] ensures a two-way data binding.

What is difference between Ng-bind and expression?

firstName expression in the application's scope are also reflected instantly in the DOM by Angular. ng-bind is about twice as fast as {{}} expression bind. ng-bind places a watcher on the passed expression and therefore the ng-bind only applies, when the passed value actually changes.

What is NG-model in angular?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

What is the difference between ngValue and ngModel?

Also ngValue is a one-way binding, and ngModel is a two-way binding.


1 Answers

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>
  
like image 198
Abdul Mateen Mohammed Avatar answered Sep 30 '22 15:09

Abdul Mateen Mohammed