需要添加AngularJS工具包
<script type="text/javascript" src="angular-1.3.0.js"></script>基础练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title></title>
</head>
<body ng-app="">
<!-- ng-app= "" -->
<!-- 有时，标签中只要写ng-app，而有时却要用ng-app=”MyApp”之类的带具体值的写法，那两者区别在哪呢？-->
<!-- 如果在js文件中的写法是直接用函数定义controller，例如： -->
<!-- var mycontroller = function($scope){ -->
<!-- $scope.msg = 'hello'; -->
<!-- } -->
<!-- 那么在html中只需要用ng-app声明即可 -->
<!-- 如果在js文件中是用module的方式来声明controller，例如：-->
<!-- var app = angular.module('MyApp', []); -->
<!-- app.controller('mycontroller ',function($scope){ -->
<!-- $scope.msg = 'hello'; -->
<!-- }); -->
<!-- 那么在html中就要声明ng-app=”MyApp”，否则是无法使用mycontroller的。-->
<!--在AngularJS中，运算公式要写在两个大括号{{ * * * }}中，代码执行后会直接输出运算结果 -->
<div>{{8 + 2}}</div> <!-- 加法运算 -->
<div>{{8 - 2}}</div> <!-- 减法运算 -->
<div>{{8 / 2}}</div> <!-- 乘法运算 -->
<div>{{8 * 2}}</div> <!-- 除法运算 -->
<div>{{ true && false }}</div> <!-- 返回false -->
<!-- &&表示相与，也就是 A 和 B -->
<!-- 实际表现为：在满足条件A的同时，也要满足条件B（二选二，三选三，多选多）-->
<div>{{ true || false }}</div> <!-- 返回true -->
<!-- ||表示相或，也就是 A 或者 B -->
<!-- 实际表现为：满足条件A，或者满足条件B（二选一，三选一，多选一）-->
<div>{{ !true }}</div> <!-- 不等于true，也就是等于flase -->
<div>{{ !false }}</div> <!-- 不等于flase，也就是等于true -->
<hr>
<!-- ng-init="" // 执行自定义的变量或表达式 -->
<!-- {id: 1, name: '张三'} // 定义id的属性， name的属性 -->
<div ng-init="user = {id: 1, name: '张三'}">
<!-- ng-bind="" // 使用自定义的变量或表达式的值来替换 HTML 元素的内容 -->
<div>ID: <span ng-bind="user.id"></span></div>
<div>用户名: <span ng-bind="user.name"></span></div>
</div>
<hr>
<!-- ng-repeat="" // 循环输出指定次数的 HTML 元素 -->
<!-- "name in usernames | limitTo: 2" // 将username中的值传给name | 限制字符串显示的字符长度-->
<div ng-init="usernames = ['张三', '李四', '王五']">
<ul ng-repeat="name in usernames | limitTo: 2">
<li>{{ name }}</li>
</ul>
</div>
<hr>
<!-- filter: 'a' // 将匹配元素集合缩减为匹配指定选择器的元素-->
<!-- 示例中的意思为：将username_en集合压缩到name变量元素中，使用name可以获取到username_en中的内容 -->
<div ng-init="usernames_en = ['zhangsan', 'lisi', 'wangwu', 'zhaolu']">
<ul ng-repeat="name in usernames_en | filter: 'a'">
<li>{{ name }}</li>
</ul>
</div>
<hr>
<!-- ng-init="clickNum = 0" // 设置点击数 = 0 -->
<!-- ng-click="clickNum = clickNum + 1" // 设置点击事件：点击数 = 点击数 + -->
<!-- 也就是，当前点击数为N，点击一次，点击数就会变为 N+1 -->
<button ng-init="clickNum = 0" ng-click="clickNum = clickNum + 1">点击我，增加次数</button>
<!-- {{ clickNum }} // 将点击数输出 -->
<p>点击次数：<i>{{ clickNum }}</i></p>
************<!-- 综合性小练习 -->************
<div ng-init="books = [{id: 1, title: 'Java编程思想', isRecommend: false, dtCreated: '00-00 00:01'}, {id: 1, title: 'C++编程思想', isRecommend: true, dtCreated: '00-00 00:02'}, {id: 1, title: '高性能MySQL', isRecommend: false, dtCreated: '00-00 00:03'}]">
<table border="1">
<tr>
<th>NO</th>
<th>ID</th>
<th>标题</th>
<th>是否推荐</th>
<th>价格</th>
</tr>
<tbody ng-repeat="book in books">
<tr>
<td>{{$index}}</td>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>
<i ng-if="book.isRecommend">是</i>
<i ng-if="!book.isRecommend">否</i>
</td>
<td>{{book.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
