一.AngularJS Select(选择框)
1.使用 ng-options 创建选择框
<div ng-app="myApp" ng-controller="myCtrl"><select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
2.使用 ng-repeat 指令来创建下拉列表
3.使用了数组作为数据源: x 为键(key), y 为值(value)<div ng-app="myApp" ng-controller="myCtrl"><select> <option ng-repeat="x in names">{{x}}</option> </select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<div ng-app="myApp" ng-controller="myCtrl"><p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
} });
</script>
表格显示序号可以在 <td> 中添加 $index,
过滤器转换为大写: 使用 uppercase,
排序显示，可以使用 orderBy过滤器
style="{{$even?'background-color: #f1f1f1':''}}" 隔行变色
二.AngularJS HTML DOM
1.ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
2.ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。
3.ng-hide 指令用于隐藏或显示 HTML 元素。
4.ng-click 指令定义了 AngularJS 点击事件。
tips:AngularJS 在 <head> 元素中被加载,但也可以在 <body> 元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面
三.AngularJS API
AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合
| angular.lowercase() | 转换字符串为小写 |
| angular.uppercase() | 转换字符串为大写 |
| angular.isString() | 判断给定的对象是否为字符串，如果是返回 true。 |
| angular.isNumber() | 判断给定的对象是否为数字，如果是返回 true。 |
四. AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容