Using Angularjs ngBind with javascript object

Question

In the following string, parsing the javascript object and placing it into an ngBinding is not evaluated it. I have a string that I am trying to include an specific part of a javascript object inside of, and am switching over to Angular for the relative ease of usage. The string at present is:

<html ng-app="bindHtmlExample">
...
<div>
    <p>"You owe ${{datatokens["DB.PMT"]}}"</p>

If I place something like "You owe ${{600+11}}" inside of the ngBinding it properly evaluates to:

"You owe me $611"

Also, when I open the console it can accurately locate datatokens["DB.PMT"]. Thus, I must be conceptually missing how to make this javascript object available to this Angular application.

if it's not in angular scope, angular can't evaluate it. If your data is in global namespace, pass it into a scope variable — charlietfl
– charlietfl, Commented Aug 12, 2014 at 16:37

Aditya Singh · Accepted Answer · 2014-08-12 16:54:02Z

3

The {{}} binding operator in angular creates a binding from $scope to view. Any time $scope changes, the view will update based on this binding. It is the shortcut for the ng-bind directive and requires the $scope object to be present . You can use the binding operator in views for evaluating bindings and updating on change. For your case you can use the binding in view as below.

HTML:

<div ng-app='app'>
    <div ng-controller='controller'>
        <div>You owe $ {{ datatokens}} </div>
    </div>
</div>

Javascript:

var app = angular.module('app', []);

app.controller('controller', function ($scope) {   
    $scope.datatokens = 600;
});

This will always update your binding and corresponding view element

answered Aug 12, 2014 at 16:54

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Angularjs ngBind with javascript object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related