理解AngularJS中的双向数据绑定

我是AngularJS的新手.很长一段时间我试图滥用它,就像我一直使用 Javascript或Mootools这样的Javascript-Frameworks.现在我明白它不再那样了……但是我遇到了一些大问题因为我总是用CMS生成我的HTML输出.

所以当它第一次出现时它是非常静态的……小例子：

<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按钮仍然存在

虽然当我将我的数据定义为javascript-array并通过Angular使用ng-repeat进行整个输出时它确实有效…像这样：

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

我希望我在这里说明一点,每个人都有我的困难和问题？任何人都可以告诉我,我在那里尝试的是否可能？

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