一.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 指令来创建下拉列表
<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>
3.使用了数组作为数据源: x 为键(key), y 为值(value)
<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 内容