了解AngularJS中的双向数据绑定

问题描述：

我是AngularJS的新手。很长一段时间，我试图以我一直使用Javascript-Frameworks（如JQuery或Mootools）的方式滥用它。现在我明白了它不会再像那样工作了......但是我总是遇到一些大问题，因为我总是用CMS生成我的HTML输出。了解AngularJS中的双向数据绑定

所以这是非常静态的，当它第一次出来......小例子：

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

现在我想，这双向数据绑定意味着我可以用角范围和控制器的帮助下生成视图，但也可以通过视图生成模型。

我可能在那里感到困惑...所以这里是我的问题。有什么方法可以从CMS的静态HTML输出中启动模型？

我想这样的事情...

<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>

而在我的控制，我写了删除功能。但是当它删除时，它只删除名称...... span-button仍然存在

虽然当我将数据定义为JavaScript数组并通过Angular使用ng-重复...像这样：

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

我希望我在这里提出一个观点，每个人都会有我的缺陷和问题？任何人都可以告诉我，如果我在那里尝试可能吗？

答

这是一个常见的问题，人们已经在适应Angular和其他类似的框架。

你不需要你的服务器来为你呈现HTML。您需要做的就是设置模板，并将适当的数据加载到范围中。

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

而在你的控制你会做这样的事

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

现在我知道你可能在想“，但我不想做一个单独的请求，让我的JSON。这很好（可能不相关，但很好）...所有你需要做的就是将它粘贴到一个全局变量中，并用$ window检索它。

谢谢，我不得不听到我已经半知的事情;） – Preexo

答

让我们来谈谈代码。这里是显示个人资料图片的实时应用程序它与MySQL的数据绑定，当MySQL（模型）视图（HTML）中的任何内容发生变化时，将被更新。

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

这里是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>

希望它能帮助！

了解AngularJS中的双向数据绑定

相关推荐