Bind scope variable with a Javascript object property

Question

I need to bind a variable with a JS object's property. Is it possible ?

In my controller

...
$scope.data = "initial value";
$scope.obj = {data : $scope.data}
...

And in my View

<input type="text" ng-model="data">
<h1> {{ obj.data }} </h1>

When i update the text in my input box it should update the value in <h1> and it should be done through the object.

No functions, No watchers or anything, Just with binding. Is it possible ?

This is my question simplified. what im trying to do is create a object with some changing variables, and pass it to an AngularJS component where it will display the value changes. I need to pass an object, not different values individually.

have you tried ng-model="obj.data" ?

Isaac
– Isaac

2017-08-24 04:24:02 +00:00
Commented Aug 24, 2017 at 4:24 — Isaac
– Isaac, Commented Aug 24, 2017 at 4:24

Vivz · Accepted Answer · 2017-08-24 05:38:52Z

1

bind your object with ng-model

.............
$scope.obj = {data : "initial value"}
................

your view

<input type="text" ng-model="obj.data">
<h1> {{ obj.data }} </h1>

edited Aug 24, 2017 at 5:38

Vivz

6,6282 gold badges19 silver badges34 bronze badges

answered Aug 24, 2017 at 4:29

Azad

5,2725 gold badges31 silver badges59 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-08-24 04:29:54Z

1

You should use <input type="text" ng-model="obj.data">

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.data = "initial value";
   $scope.obj = {data : $scope.data}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<input type="text" ng-model="obj.data">
<h1> {{ obj.data }} </h1>
</body>

answered Aug 24, 2017 at 4:29

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Sathya R Over a year ago

delete the line <input type="text" ng-model="obj.data">, and manipulate obj.data through javascript function. will that work?

Collectives™ on Stack Overflow

Bind scope variable with a Javascript object property

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related