AngularJS中双向数据绑定的简单实际示例 [英] Simple practical example for two way data binding in AngularJS

问题描述

任何人都可以借助简单的代码帮助我了解AngularJS中数据绑定的两种确切含义.

Can any one help me out to understand what exactly two way data binding in AngularJS means with a help of simple code.

推荐答案

一种数据绑定方式-

模型值会自动分配给通过数据绑定符号指定的HTML占位符元素，但是 HTML元素不会更改模型中的值(一种方式).

The model values are automatically assigned to the HTML placeholder elements specified through the data binding notation, but the HTML elements don't change the values in the model(one way).

示例:

控制器:

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

HTML :

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

双向数据绑定-

模型值自动分配给通过数据绑定符号指定的HTML占位符元素，其中 HTML元素可以更改模型中的值(双向).

The model values are automatically assigned to the HTML placeholder elements specified through the data binding notation, where HTML elements can change the value in the model(two way).

示例:

控制器:

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 Input元素更改firstName模型值.

In above example we can change firstName model value with the help of HTML Input element.

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

这篇关于AngularJS中双向数据绑定的简单实际示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！