双向数据绑定会从两个方向同时跟踪变化,允许元素从用户处收集数据以修改程序的状态。双向绑定通过 ng-model 指令来创建
<!doctype html>
<html lang="en" ng-app="exampleApp">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<h3 class="panel-header">To Do List</h3>
<div class="well">
<div>
The first item is: {{todos[0].action}}
</div>
</div>
<!--ng-model 双向绑定,仅能应用在那些允许用户输入的标签上-->
<div class="form-group well">
<label for="firstItem">Set First Item</label>
<input name="firstItem" class="form-control" ng-model="todos[0].action" />
</div>
</div>
<script type="text/javascript">
angular.module("exampleApp",[])
.controller("defaultCtrl",function($scope){
$scope.todos=[
{action:"get groceries",complete:false},
{action:"call number",complete:true},
{action:"buy shoes",complete:true},
{action:"buy flower",complete:false},
{action:"play",complete:true}
]
})
</script>
</body>
</html>