1

Here I'm trying to achieve two way binding functionality of AngularJs using normal JavaScript.

My assumption is that, $scope.name (ng-model="name") is equivalent to document.getElementById("name")

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {   
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="firstname"> 
    Angular twoway => {{firstname}}
</div>

==============================================<br>

<input type="text" id="name" onkeyup="getName()">
Javascript twoway => <p id="twoway"></p>

<script>
function getName(){
 document.getElementById("twoway").innerHTML = document.getElementById("name").value;
}
</script>

</body>
</html>

As, AngularJS only uses model and curly brases...

Can I use same id "name" , instead of another id "twoway" ?

Or any other best approach, please help me?

skdonthi
  • 1,308
  • 1
  • 18
  • 31
  • You're better implementing MutationObserver. Ids must be unique. [Take a look here](https://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript). – Adrian Nov 20 '17 at 10:06
  • 1
    _ng-model="name" is equivalent to document.getElementById("name")_ No, it's **not**! – Dhaval Marthak Nov 20 '17 at 10:10
  • may be $scope.name or vm.name is equivalent to document.getElementById("name") – skdonthi Nov 20 '17 at 10:12

0 Answers0