需要添加AngularJS工具包
<script type="text/javascript" src="angular-1.3.0.js"></script>基础练习 （小实例）：
1. 获取当前时间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
<script>
var app = angular.module("timer", []);
<!-- 一般情况下directive都限制为定义“属性”的方式使用 -->
app.directive("nowTime", function () {
return {
<!-- 关键字restrict:只用于限定指针 -->
<!-- 用于告诉编译器，对象已经被指针所引用，不能通过除该指针外所有其他直接或间接的方式修改该对象的内容 -->
restrict: "EACM",
<!-- 关键字template:定义模板信息 -->
<!-- 调用该对象是，会直接返回模板中定义的信息 -->
<!-- 模板中定义的信息为：获取当前时间的年+月+日+上午/下午+时+分+秒 -->
template: "<h3>" + new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString() + "</h3>",
<!-- replace: 方法执行的是查找并替换的操作 -->
replace: true
}
});
</script>
</head>
<body ng-app="timer">
<!-- 获取当前时间 -->
<!-- <now-time>:自定义标签 -->
<now-time>当前时间：</now-time>
<!-- 标签: restrict: "E" - Element -->
<div now-time>当前时间：</div>
<!-- 属性: restrict: "A" - Attribute -->
<div class="now-time">当前时间：</div>
<!-- 类: restrict: "C" -->
<!-- directive: now-time --> <!-- 注释: restrict: "M" -->
</body>
</html>2.输入输出转化：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
<script type="text/javascript">
//获取input标签 取出输入的name值
$("input[name='name']")
</script>
</head>
<body>
<div ng-controller="myCtrl">
输入: <input ng-model="name"><br/>
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope) {
//将上面取到的name值输出
$scope.name = "test";
});
</script>
</body>
</html>3.自定义颜色风格：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
<style>
/* 获取到value值，为其定义背景颜色 */
.sky {
background-color: lightblue;
}
.tomato {
background-color: coral;
}
</style>
<script>
</script>
</head>
<body ng-app="">
<p>选择一个类:</p>
<select ng-model="world">
<!-- 添加value属性 -->
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>
<div ng-class="world">
<h1>Hello World!</h1>
</div>
</body>
</html>4.定义table中的各项属性值：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
<script type="text/javascript">
var app = angular.module("myApp", []);
<!-- .filter() // 返回符合一定条件的元素 -->
<!-- 这里的意思是：大写字母过滤器 -->
<!-- .toUpperCase() // 将字符串转换成大写 -->
app.filter("upperCase", function() {
return function(msg, flag) {
return msg.toUpperCase();
}
});
<!-- 这里的意思是：小写字母过滤器 -->
<!-- .toLowerCase() // 将字符串转换成小写 -->
app.filter("lowerCase", function() {
return function(msg, flag) {
return msg.toLowerCase();
}
});
<!-- 这里的意思是：副标题过滤器 -->
app.filter("subTitle", function () {
return function(msg, flag) {
<!-- .substr() // 在字符串中抽取指定数目的字符 -->
<!-- .substr()的参数指定的是:开始位置, 长度 -->
return msg.substr(0, flag);
}
});
<!-- console.log() // 向web控制台输出一条消息 -->
console.log(Math.random());
</script>
</head>
<body ng-app="myApp">
<div ng-init="books = [{id: 1, title: 'Thinking in Java', isRecommend: false, price: 28}, {id: 2, title: 'Thinking in C++', isRecommend: true, price: 32}, {id: 3, title: 'MySQL', isRecommend: false, price: 26}]">
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>ID</th>
<th>标题</th>
<th>是否推荐</th>
<th>价格</th>
</tr>
</thead>
<!-- book in books // book数据从books集合中获取 -->
<!-- orderBy: 'price' : true" // 排序 ：‘排序条件为价格’ ：真（也就是从大到小） -->
<tbody ng-repeat="book in books | orderBy: 'price' : true">
<tr>
<td>{{ $index }}</td>
<td>{{ book.id}}</td>
<td>{{ book.title | subTitle: 6 }}</td>
<td>
<!-- 显示“是”，隐藏“否”；反之相反 -->
<i ng-show="book.isRecommend">是</i>
<i ng-hide="book.isRecommend">否</i>
</td>
<!-- 填写信息：book价钱值 | 添加货币符号：￥ -->
<td>{{ book.price | currency: "￥"}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>******************<!-- 综合性小练习 -->****************** **<!-- 实现“掷骰子比大小”的练习 -->**
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
<script type="text/javascript">
var rand = function () {
return Math.ceil(Math.random() * 6); // 随机数生成
};
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
});
var rollDice = function () {
var appElement = document.querySelector("[ng-controller=myCtrl]"); // 设置包含所有内容的父DIV标签
var $scope = angular.element(appElement).scope();
$scope.zhangsan = rand(); // 将随机数传入scope对象下带有“zhangsan”标识的标签内
$scope.lisi = rand(); // 将随机数传入scope对象下带有“lisi”标识的标签内
$scope.winer = ($scope.zhangsan > $scope.lisi ? "张三" : ($scope.zhangsan < $scope.lisi ? "李四" : "相等")) // 比较“zhangsan”与“lisi”的值
$scope.$apply(); // 同步到Angular控制器中
};
</script>
</head>
<body>
<div ng-controller="myCtrl">
<div>张三：<input ng-model="zhangsan"/></div>
<div>李四：<input ng-model="lisi"/></div>
<div>赢方：<input ng-model="winer"/></div>
<div><input type="button" value="掷骰子" onclick="return rollDice();"/></div>
</div>
</body>
</html>
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
