AngularJS中雙向數據綁定的簡單實用示例

任何人都可以幫助我理解在AngularJS中使用簡單代碼實現雙向數據綁定的意義。AngularJS中雙向數據綁定的簡單實用示例

2015-06-02 user3742125

http://stackoverflow.com/questions/30425052/how-angularjs-implement-its-two-way-data-binding-mechanism/30425085#30425085 –

數據的一種方式）。

例：

控制器：

app.controller('MainCtrl', function($scope) { 
    $scope.firstName = 'John'; 
});

HTML：

<span>First name:</span> {{firstName}}<br />

雙向數據綁定 -

模型值自動分配給通過數據綁定表示法指定的HTML佔位符元素，其中HTML元素可以更改模型中的值（雙向）。

例：

控制器：

app.controller('MainCtrl', function($scope) { 
    $scope.firstName = 'John'; 
});

HTML

<span>First name:</span> {{firstName}}<br /> 
<span>Set the first name: <input type="text" ng-model="firstName"/></span><br />

在上面的例子中，我們可以用HTML輸入元件的幫助下改變的firstName模型值。

工作例如：http://plnkr.co/edit/GxqBiOoNFuECn55R4uJZ?p=preview

來源

2015-06-02 08:02:32 User2

在這個例子中，當模型也就是說，當「$ scope.firstName」改變時HTML也會改變，如果我的理解沒有錯。如果是這種情況，那麼在頁面加載時，標籤「名字：」應該是「John」。對？？。如果我錯了，請糾正我。其實我試圖理解「模型變化視圖也變化時」的概念。 – user3742125

是的。這是正確的。在第一個例子中，我們更新了控制器的$ scope.firstName值，然後只更改HTML中的值（如此一種方式）。但在第二種情況下，我們可以從控制器和HTML（即視圖）中更改它，所以它是（雙向的）。 – User2

好的...但是當我在瀏覽器中運行下面的代碼時，它不會在頁面加載時顯示名字爲「John」。爲什麼會這樣。<！DOCTYPE HTML> \t

\t \t First name: {{firstName}}
\t \t Set the first name:

– user3742125

從AngularJS homepage（2015年6月2日）：基本條目

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    </head> 
    <body> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </body> 
</html>

這可能是雙向數據在角結合的最簡單的例子。
該<input>被關聯到yourName模型，並且相同的模型被用於填充<h1>標籤的內容。修改一個會自動更新另一個。

雖然示例中的數據綁定可以看作是單向，因爲您無法直接修改<h1>，所以應該讓您開始。 AngularJS文檔和教程包含很多優秀的資源。

的模型值被自動分配給結合符號通過數據指定的HTML佔位符元素，但HTML元素不會在模型改變的值（單程 - 結合

來源

2015-06-02 07:45:39 tompave

AngularJS中雙向數據綁定的簡單實用示例

回答

相關問題