7

Here is the code that I am using, don't understand why is there a difference in the output of ng-bind and {{}}.

angular.module('Test', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="Test">
  <input type="text" ng-model="foo.bar" />
  <input type="text" ng-model="foo.baz" />
  <p ng-bind="foo"></p>
  <p>{{ foo }}</p>
</div>

This is the output that I am getting

//for ng-bind
[object Object]      

//for {{}}
{"foo":"ankur","bar":"23"}
deceze
  • 510,633
  • 85
  • 743
  • 889
Ankur Marwaha
  • 1,613
  • 2
  • 15
  • 30
  • The reason this is happening is because you are sending an array of objects from the controller to your view. And then you directly bind the array to a

    tag. So the entire array is getting displayed with object as it is unparsed on your view..

     – Jatinder Kaur Aug 22 '16 at 09:42
  • 3
    No, you are wrong. How can you say I am using array of objects ? – Ankur Marwaha Aug 22 '16 at 09:45
  • 2
    @Francescoes. Where are you seeing an *array*? `[object Object]` is the standard `toString` value, not an array. – deceze Aug 22 '16 at 09:47
  • @deceze right, my fault, it is also the string value of an object – Francesco Aug 22 '16 at 09:49
  • http://stackoverflow.com/questions/25741586/difference-between-ng-bind-and-interpolation-in-angular look at this.. – Shakir Ahamed Aug 22 '16 at 09:55

1 Answers1

7

The reason is that the {{}} is evaluating the expression before to bind it to the view, while ng-bind is not doing that, so you are having a string rapresentation of your array object.

Francesco
  • 1,383
  • 7
  • 16
  • 1
    ok, but i thought both {{}} and ng-bind are meant for the same thing. aren't they ? – Ankur Marwaha Aug 22 '16 at 09:48
  • 1
    they are, they just work differently, so it all depends on what you need and how you need it to work. It would have been redundant if both were doing the exact same thing, there are use cases where you need one over another. – Spluf Aug 22 '16 at 09:49
  • they are not exactly the same thing. Here the source code of [ngBind](https://github.com/angular/angular.js/blob/master/src/ng/directive/ngBind.js#L3) – Francesco Aug 22 '16 at 09:50