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>