Understanding two-way data binding in AngularJS

Question

I am new to AngularJS. For a long time I tried to abuse it the way I always used the Javascript-Framework, such as JQuery or Mootools. Now I realized that this will no longer work ... But I ran into some big problems since I always create my HTML output using CMS.

So, this is pretty static when it first appears ... A small example:

<ul> <li>foo <span>delete</span></li> <li>bar <span>delete</span></li> <li>blub <span>delete</span></li> </ul> 

Now I thought that two-way data binding means that I can generate a view using Angular Scope and Controller, but it can also generate models from a view.

I can confuse something there ... So here is my question. Is there a way to trigger models from static HTML output from CMS?

I tried something like this ...

 <ul ng-controller="Ctrl"> <li ng-init="item[0].name=foo">{{item[0].name}} <span ng-click="remove(0)">delete</span></li> <li ng-init="item[1].name=bar">{{item[1].name}} <span ng-click="remove(1)">delete</span></li> <li ng-init="item[2].name=blub">{{item[2].name}} <span ng-click="remove(2)">delete</span></li> </ul> 

And in my controller, I wrote a delete function. But when he deleted, he deleted only the name ... the span button was still

This really worked when I defined my data as a javascript array and made all the output through Angular with ng-repeat ... like this:

 <ul ng-repeat="it in item"> <li>{{it.name}} <span ng-click="remove($index)">delete</span></li> </ul> 

Hope I did something here and everyone got my problems and problems? Can someone tell me if it is possible what I'm trying to do?

Answer 1

This is a common problem that people are setting up on Angular and other frameworks like this.

You no longer need your server to render HTML. All you have to do is set up the template and load the necessary data into the area.

 <ul ng-controller="Ctrl" ng-init="getMyItems()"> <li ng-repeat="item in items">{{item.name}} <a ng-click="remove($index)">delete</a></li> </ul> 

And in your controller you will do something like this

 app.controller('Ctrl', function($scope, $http) { $scope.items = []; $scope.getMyItems = function(){ $http.get('/my/json/stuff/url').success(function(data) { $scope.items = data; $scope.$apply(); }); }; }); 

Now I know that you probably think: “But I do not want to make a separate request to get my JSON. And that’s fine (maybe it doesn’t matter, but it’s fine) ... All you have to do is paste it into a global variable and get it instead of $ window.

Answer 2

Talk to the code. Here's a real-time application that shows profile images that are tied to data from MySQL. When all changes to the MySQL view (model) (HTML) are updated.

 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; }); }; 

Here is the HTML

 <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"> <h4>User Say's</h4><hr> <p> This is a Demo feed. It is developed to demonstrate Two way data binding. </p> <img src="{{data.profile_picture}}"> </div> </div> </div> 

More details: http://codeforgeek.com/2014/09/two-way-data-binding-angularjs/

Hope this helps!