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

我希望我在這裏提出一個觀點，每個人都會有我的缺陷和問題？任何人都可以告訴我，如果我在那裏嘗試可能嗎？

來源

2012-11-01 Preexo

這是一個常見的問題，人們已經在適應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-01 17:16:52

謝謝，我不得不聽到我已經半知的事情;） – 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>

希望它能幫助！

來源

2015-01-30 06:51:48

瞭解AngularJS中的雙向數據綁定

回答

相關問題