Angular解决双向数据绑定

时间:2023-03-08 15:06:40
Angular解决双向数据绑定

<!DOCTYPE html>

<html ng-app="myApp1">
<body>
<div ng-controller="myCtrl1" class="container">
<h1>复习:双向数据绑定</h1>
<h2>方向1:Model=>View</h2>
<p>{{emp.age}}</p>
<p ng-bind="emp.age"></p>
<p>{{arr}}</p>
<ul>
<li ng-repeat="n in arr">{{n}}</li>
</ul>
<button ng-click="f1()" class="btn btn-warning">又过了一年</button>
</div>

<script src="js/angular.js"></script>
<script>
//model=>controller=>module
angular.module('myApp1', [])
.controller('myCtrl1', function($scope){
$scope.emp = {};
$scope.emp.age = 20;
$scope.arr = [];
//var f1 = function(){ console.log('f1....') }
$scope.f1 = function(){
$scope.emp.age++; //修改model数据
$scope.arr.push( Math.floor(Math.random()*100) );
}
})
</script>

</body>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css"/>
<title></title>
</head>
</html>

Angular解决双向数据绑定

优悦集团(深圳)有限公司

悦享科技  乐享生活

微信:YOJOYGROUP

微博: http://weibo.com/YOJOYGROUP

官网:http://www.yojoygroup.com/

联系&投稿:service@yojoygroup.com

Angular解决双向数据绑定