Two Way data Binding in Angular js

Question

I am using nodejs + Angular and html as a froentend

Here is my HTML Code

<div id="container" ng-app='two_way' ng-controller='two_way_control'>
      <div class="row" ng-repeat="data in profile_pictures">
        <div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
          <h4 style="padding:10px;">User Say's</h4><hr>
          <img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
        </div>
      </div>
    </div>

and my angular code is here

app.controller('two_way_control',function($scope,$http,$interval){
  load_pictures();
  $interval(function(){
    load_pictures();
  },300);
  function load_pictures(){
  $http.get('http://localhost:3000/load').success(function(data){    
    $scope.profile_pictures=data;
  });
  };
});

and my server code is

app.get('/load',function(req,res){
  connection.query("SELECT * from user_info",function(err,rows){
    if(err)
      {
        console.log("Problem with MySQL"+err);
      }
      else
        {
          res.end(JSON.stringify(rows));
        }
  });
});

Which is working fine..

When i entered a new record in **user_info*. it will display new record to me.

Is this right way to do two way data binding or i am missing something

Please help.

Thanks

Nicolas Barrera · Accepted Answer · 2014-11-15 16:05:24Z

1

It looks as if you're doing one way binding because your angular code is never modifying the profiles pictures in the table (meaning you ain't got no form fields, your page is read only). But AFAIK you're doing everything right, as soon as you add editing capabilities to your angular page you would be doing two way binding all the way

answered Nov 15, 2014 at 16:05

Nicolas Barrera

5273 silver badges13 bronze badges

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

2 Comments

Hitu Bansal Over a year ago

Can you give me example for that pls

Hitu Bansal Over a year ago

i want to do two way binding

Rafael Kazuo Sato Simiao · Accepted Answer · 2014-11-15 16:06:49Z

1

YES! Angular '2-way bind' is between scope.variable and VIEW (ng-model in input elements). In this case, the SRC property of IMG element need to be setd with ng-src! Because IMG is a html element that load before angular principal scripts.

<div id="container" ng-app='two_way' ng-controller='two_way_control'>
  <div class="row" ng-repeat="data in profile_pictures">
    <div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
      <h4 style="padding:10px;">User Say's</h4><hr>
      <img ng-src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
    </div>
  </div>
</div>

answered Nov 15, 2014 at 16:06

Rafael Kazuo Sato Simiao

766 bronze badges

17 Comments

Rafael Kazuo Sato Simiao Over a year ago

Do u want 2-way bind with the server side (nodejs)?

Hitu Bansal Over a year ago

yes.. when anything on server side, i want it automatically reflect on froentend .

Rafael Kazuo Sato Simiao Over a year ago

That way u post works, but is not a real 2-way bind with server.

Rafael Kazuo Sato Simiao Over a year ago

2-way bind is between control e inputModels... When u change value property from a input that have ng-model associated with some scope variable, this will update.

Rafael Kazuo Sato Simiao Over a year ago

Behind FIREBASE runs web socket

|

Collectives™ on Stack Overflow

Two Way data Binding in Angular js

2 Answers 2

2 Comments

17 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

17 Comments

Your Answer

Sign up or log in

Post as a guest

Related