您的位置：首页 > Web前端 > AngularJS

3、AngularJs的双向数据绑定

2016-06-12 13:00 751 查看

1、AngularJs的指令系统

  • ng-app

  • ng-controller

2、AngularJs的双向数据绑定

  • MVVM
• $timeout
• ng-click (类似于点击事件)
• ng-model (绑定一个Model的数据)
3、双向数据绑定
3.1 双向数据绑定,M影响V

<!DOCTYPE html>
<html ng-app>

<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope, $timeout) {
$scope.age = 10;
/*1、利用定时器*/
/*$timeout(function() {
$scope.age = 5;
}, 2000);*/
/*2、利用点击事件*/
$scope.show = function() {
$scope.age = 5;
}
}
</script>
</head>

<body>
<div ng-controller="Aaa" ng-click="show()">
{{age}}
</div>

</body>

</html>

3.2 双向数据绑定,V影响M

<!DOCTYPE html>
<html ng-app>

<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
function Aaa($scope, $timeout) {
$scope.name = 'zhang';
}
</script>
</head>

<body>
<div ng-controller="Aaa">
<input type="text" ng-model="name" />
<p>{{name}}</p>
</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS 双向数据绑定 timeout ng-click

相关文章推荐

新的分享

章节导航