admin管理员组

文章数量:1431413

{{}} 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 ?

{{}} 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 ?

  • javascript
  • html
  • angularjs
Share Improve this question asked Aug 18, 2016 at 5:37 Ankur MarwahaAnkur Marwaha 1,9052 gold badges21 silver badges35 bronze badges 1
  • you should use ng-bind instead of ng-model for one way binding – z0mBi3 Commented Aug 18, 2016 at 5:41
Add a ment  | 

5 Answers 5

Reset to default 5

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./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>

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.

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.

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

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/

本文标签： javascriptDifference between ngmodel and angular expressionStack Overflow

版权声明：本文标题：javascript - Difference between ng-model and angular expression - {{}} - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745584396a2664807.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。