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>
