AngularJS学习笔记(二)

一.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 内容