AngulaJs中的简单数据绑定
Demo-v1.0.html
<!doctype html>
<html ng-app="AngularDemo" ng-controller="AnagularCtrl" ng-init="AccountId=1;AccountName='Tom';Location='CHINA';AccountInfo={'AccountId':1,'AccountName':'matrix','Location':'USA'};Week=['Mon','Tue','Wen','Thu','Fri','Sat','Sun']">
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素-->
<title>AngularJs的语法介绍!</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="描述">
<link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
<link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
<link type="text/css" href="css/matrix.css" rel="stylesheet" />
<!--css,js-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
font-family: "微软雅黑";
background: linear-gradient(90deg, #1d3746, #4D3648);
height: 2205px;
}
a {
text-decoration: none;
}
.wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
}
#showButton {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
#showButton2 {
display: inline-block;
padding: 8px 69px;
background: #C2A84A;
color: #fff;
font-size: 12px;
border-radius: 5px;
}
#showButton2:hover {
background: #EDE176;
color: #000;
transition: all 0.3s linear;
}
input[type="text"] {
background: #252525;
outline: none;
border-radius: 5px;
border: 1px solid #252525;
padding: 6px 18px;
}
ul li {
margin: 10px 0px;
color: #EDE176;
list-style: none;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>直接输出在html标签中定义的ng-init的变量的值</li>
<li>{{Now}}</li>
<li>输出定义的对象</li>
<li>{{ AccountInfo.AccountId }}</li>
<li>{{ AccountInfo.AccountName }}</li>
<li>{{ AccountInfo.Location }}</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
<script type="text/javascript">
// 定义一个Angular的模块
var app = angular.module("AngularDemo", []);
// 定义一个Angular的控制器
app.controller("AnagularCtrl", function($scope) {
var now1 = new Date();
$scope.Now = now1.getHours() + ":" + now1.getMinutes() + ":" + now1.getSeconds();
$scope.setTimer = function() {
$scope.$apply(function() {
var now = new Date();
$scope.Now = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
console.log($scope.Now);
});
}
$scope.setTimerInterval = setInterval($scope.setTimer, 1 * 1000);
});
</script>
</body>
</html>
组合绑定
<script type="text/javascript">
// 组合绑定
var app = angular.module("matrix", []);
app.controller("matrixctrl", function($scope) {
$scope.xing = "";
$scope.ming = "";
// 对xing这个变量进行观察
$scope.$watch("xing", function() {
// 给FullName这个变量赋值
$scope.FullName = $scope.xing + $scope.ming;
})
// 对ming这个变量进行观察
$scope.$watch("ming", function() {
$scope.FullName = $scope.xing + $scope.ming;
})
});
</script>
简单的数组数据绑定
<body>
<div class="wrapper">
<ul>
<li>姓：<input type="text" ng-model="xing" /></li>
<li>名：<input type="text" ng-model="ming" /></li>
<li>{{xing||''}} {{ming||''}}</li>
<li>{{FullName}}</li>
</ul>
<ul ng-repeat="a in UserNameList">
<li>{{a}}</li>
</ul>
</div>
<script type="text/javascript " src="js/jquery-2.1.1.min.js "></script>
<script type="text/javascript " src="js/angular-1.0.1.min.js "></script>
<script type="text/javascript ">
// 组合绑定
var app = angular.module("matrix", []);
app.controller("matrixctrl", function($scope) {
$scope.xing = "";
$scope.ming = "";
// 对xing这个变量进行观察
$scope.$watch("xing", function() {
// 给FullName这个变量赋值
$scope.FullName = $scope.xing + $scope.ming;
})
// 对ming这个变量进行观察
$scope.$watch("ming", function() {
$scope.FullName = $scope.xing + $scope.ming;
})
// 定义一个数组
$scope.UserNameList = ["Tom", "Jerry", "David", "keke", "Arry"];
});
</script>
</body>
