4

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

所以它非常静态，当它第一次出现时......小例子：

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

现在我想，双向数据绑定意味着我可以在 Angular Scope 和 Controller 的帮助下生成视图，也可以通过视图生成模型。

我可能会在那里感到困惑......所以这是我的问题。有没有办法从 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>

在我的控制器中，我写了一个删除函数。但是当它删除时，它只删除了名称......跨度按钮仍然存在

当我将我的数据定义为 javascript-array 并通过 Angular 使用 ng-repeat 完成整个输出时，它确实有效......就像这样：

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

我希望我在这里提出了一个观点，每个人都得到我的困难和问题？谁能告诉我我在那里尝试的东西是否可行？

4

2 回答 2

9

这是人们适应 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 检索它。

于 2012-11-01T17:16:52.637 回答
0

让我们谈谈代码。这是一个实时应用程序，它显示绑定到 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>

了解更多： http ://codeforgeek.com/2014/09/two-way-data-binding-angularjs/

希望能帮助到你 ！

于 2015-01-30T06:51:48.093 回答