AngularJS（二）
选择框
<!-- <select ng-model="selectedName" ng-init="selectedName=names[0]" ng-options="name for name in names"></select> -->//用ng-options表示
<select ng-model="selectedName" ng-init="selectedName=names[2]">
<option ng-repeat="x in names">{{x}}</option>//用ng-repeat表示
</select>
<script>
$scope.names = ["Google", "Runoob", "Taobao"];
</script>
代码只写了核心的部分
表格
$index:通常与ng-repeat连用，表示序列号
$odd:表奇数项
$even:表偶数项
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
API
| 函数名 | 作用 |
|---|---|
| angular.$$lowercase() | 转换字符串为小写 |
| angular.$$uppercase() | 转换字符串为大写 |
| angular.isString() | 判断是否是字符串 |
| angular.isNumber() | 判断是否是数字 |
包含
和<%@include file="%> 作用是一样的，使用ng-include，可以将html包含进来，如果html里面有AngularJS的代码，它仍然可以正常执行。
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'"></div>
</div>
如果文件 “sites.htm” 中有 AngularJS 代码，它将被正常执行
动画
AngularJS 提供了动画效果，可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>
