What causes the variation in results between ng-bind and {{}} when displaying a JSON object?

My current code is causing a discrepancy in the output between ng-bind and {{}}, and I need help understanding why.

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>

The current output I am seeing

//for ng-bind
[object Object]      

//for {{}}
{"foo":"ankur","bar":"23"}

Answer №1

One explanation for this is that the {{}} mechanism evaluates the expression before binding it to the view. On the other hand, ng-bind does not perform this evaluation, resulting in a string representation of your object instead of an array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging Ajax for Executing a MySQL Query in PHP upon Clicking the Facebook Like Button

Is it possible to execute a MySQL query whenever a Facebook Like button is clicked on a webpage? I am aware that FB.Event.subscribe('edge.create', function(response) {} is used for such actions. However, my lack of knowledge in Javascript and AJA ...

How to retrieve JSON data from an AngularJS HTTP POST request using a servlet

While attempting to send data in JSON format from an angularJS client using a post http request and retrieve it through a j2ee servlet, I encountered an error. Strangely, my complete data can only be accessed using the getParameterNames method in my servle ...

Having trouble with the background color not changing on scroll in Bootstrap 5 navbar?

I have gone through other posts, and I didn't encounter this issue while working on a regular html/css/js project. However, I need bootstrap for this particular project, and I believe it might be somehow interfering with my script, but I'm unsure ...

Guide on making a button display an image, then switch back to the initial image when clicked again

Currently, I have this neat feature on my website where there's a button that toggles the image/background color - kind of like a dark mode switch. The background change is working fine, but I'm encountering some challenges with organizing the im ...

Ways to eliminate existing information when conducting a search

Recently, I was tasked with integrating a search engine into a website that already has a list of data displayed on the first page. The challenge I faced was figuring out how to hide or remove this existing data when a new search request is made. You can v ...

session failed to register the third variable

I have successfully implemented a login system in codeigniter. However, I am facing an issue where the session is not storing the user_type variable when I log in. I have reviewed my code multiple times but cannot seem to figure out what is causing this pr ...

Uploading a CSV file in JSON format to Amazon S3 with Node.js

Within my nodejs server.js script, the following code snippet can be found: router.post('/submission', (req, res) => { let data_filtered = req.body.data }) Upon user submission of a csv file, I am successfully retrieving it on the backend. ...

I can't understand why this question continues to linger, I just want to remove it

Is there a valid reason for this question to persist? I'm considering removing it. ...

The module in AngularJS could not be loaded

Can anyone help me figure out why I am encountering the following issue: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.6/$injector/modulerr?p0=helloKinveyApp&p1=E…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.6%2Fangular.mi ...

Understanding the `DOMNodeInserted` event listener can be incredibly useful for pinpointing changes within Iframe contents

On my website, there is an iframe that loads content and I am trying to find the element that comes after it has finished loading. This is the function I used: $("body").on("DOMNodeInserted", ".issueContentIframe", function() { $(this).css('border& ...

"Exploring the Possibilities of Expanding a Jquery UI Widget (Version 1.7

I am looking to customize the sortable widget, but I haven't been able to find accurate documentation. The best resource I came across was located here: . My initial attempt was: $.widget("ui.customsortable", $.extend($.ui.sortable, { _init: funct ...

Tips for relocating a popup window''s position

A situation has arisen in my application where a popup window is opened with the following code: function newPopup(url, windowName) { window.open(url,windowName,'height=768,width=1366,left=10,top=10,titlebar=no,toolbar=no,menubar=no,location=no,d ...

The setLanguage function in jsPDF does not support rendering different language characters

I'm currently working with jsPDF in Angular 2 and I'm experiencing an issue where my HTML content is not converting successfully into a PDF when it's written in Hebrew. Other languages seem to work fine, but Hebrew is causing a problem. How ...

Setting a minimum height for bars on a graph can be achieved by adjusting the

I need assistance with my graph display. Currently, the graphs are not showing when the value is less than a certain point. I would like to set a minimum height so that they can be displayed regardless of the value. My graphs are being generated using cha ...

Adding items to the array is only effective when done within the loop

My approach involves retrieving data from an API using axios, organizing it within a function named "RefractorData()," and then pushing it onto an existing array. However, I have encountered a problem where the array gets populated within a forEach loop, a ...

Tips for incorporating multiple grouped && and || conditions in if-else statements

I am looking to create conditions using && and || grouping. This means if one group satisfies the condition, the first action will be executed; otherwise, the second action will be taken. I plan to achieve this using if-else statements. Can someone provide ...

The shadows in HTML5 Three.js r81 experience a loss of alpha maps when the camera is rotated

While working on my project using Three.JS r81, I encountered a problem with shadows passing through transparent materials when using a custom depth shader. Initially, the shadows appeared fine when there was only a tree in the scene. However, as soon as I ...

Utilizing a Function Across Controllers in AngularJS: A Guide

When developing my angularjs application, I decided to create two separate modules - 'home' and 'templates'. I am now faced with the challenge of utilizing functions from one module in the other. Here's how I approached it: Modu ...

Transforming web pages containing html, css, and javascript code into a custom node.js application

I am facing an issue where my HTML pages with CSS and js files work perfectly when opened individually in a browser like Chrome. However, when I try to integrate these pages into a Node.js project that I have created, the js file is not being recognized ...

`the varied significance of e.target in web browsers`

Can someone explain why Mozilla and Chrome have different values for e.target? I've created an example to demonstrate. Check out the example here In Mozilla, e.target displays as: <button type="button"> Whereas in Chrome, it shows as: < ...