AngularJS（三）
AngularJS表格
ng-repeat
显示序号 ($index)
表格显示序号可以在 <td> 中添加 $index
1 <style> 2 table,th,td{ 3 border: 1px solid grey; 4 border-collapse: collapse; 5 padding: 5px; 6 } 7 table tr:nth-child(odd){ 8 background: #f1f1f1; 9 } 10 table tr:nth-child(even){ 11 background: #ffffff; 12 } 13 </style> 14 </head> 15 <body> 16 17 18 <!-- 输出表格，并改变css样式 19 table>tr>td 20 --> 21 <div ng-app='myApp' ng-controller='myCtrl'> 22 <table> 23 <tr ng-repeat="x in names | orderBy:'City'"> 24 <!-- 表格中显示序号 --> 25 <td>{{$index + 1}}</td> 26 <td>{{x.Name}}</td> 27 <td>{{x.City | uppercase}}</td> 28 </tr> 29 </table> 30 </div> 31 32 33 34 <!-- 引入AngularJS --> 35 <script src="angular.min.js"></script> 36 <!--<script src="personController.js"></script>--> 37 <script> 38 //实例化AngularJS应用程序对象 39 var app = angular.module('myApp', []); 40 //创建控制器 41 app.controller('myCtrl', function ($scope,$http){ 42 $http.get('Customers_JSON.php').success(function (response){ 43 $scope.names = response.records; 44 }); 45 }); 46 </script>
AngularJS HTML DOM
AngularJS提供一些指令：在HTML DOM元素的属性上绑定应用数据
ng-disabled 指令属性值为true或false，直接绑定程序数据到HTML的disabled属性
1 <div ng-app="" ng-init="mySwitch=true"> 2 3 <p> 4 <button ng-disabled="mySwitch">点我!</button> 5 </p> 6 7 <p> 8 <input type="checkbox" ng-model="mySwitch">按钮 9 </p> 10 11 <p> 12 {{ mySwitch }} 13 </p> 14 15 </div>
/******************/
1 <div ng-app="" ng-init="mySwitch='true'"> 2 <button ng-disabled="mySwitch">按钮</button> 3 <input type="checkbox" ng-model="mySwitch" />多选框 4 <h1>{{mySwitch}}</h1> 5 </div>
ng-show="true"
ng-show="false
ng-hide="true"
ng-hide="false"
AngularJS 事件
AngularJS 有自己的HTML事件指令
ng-click 指令
ng-hide 指令
ng-show 指令
1 <div ng-app="" ng-init="count=1"> 2 <p ng-click="count=count+1">点我</p> 3 {{count}} 4 </div>
/****************************************/
1 <!-- 制作button点击时的toggle效果 2 --> 3 <div ng-app="myApp" ng-controller="myCtrl"> 4 <button ng-click="toggle()">显示/隐藏p</button> 5 <p ng-hide="btnCtrl">ppppppppppppppppppppppppppp</p> 6 </div> 7 8 <!-- 引入AngularJS --> 9 <script src="angular.min.js"></script> 10 <script> 11 //实例化AngularJS应用程序对象 12 var app = angular.module('myApp', []); 13 //创建控制器 14 app.controller('myCtrl', function ($scope) { 15 $scope.btnCtrl = false; 16 $scope.toggle = function () { 17 $scope.btnCtrl = !$scope.btnCtrl; 18 }; 19 }); 20 </script>
AngularJS 模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
创建模块
angular.module(应用程序名, [])
[]代表不依赖其他模块
添加控制器
//app是应用程序对象，app是一个模块
//$scope是全局对象，后面是各种服务对象
app.controller(控制器名, function ($scope,$location,$http,$timeout,$interval...){});
添加指令
1 <!-- 添加指令 2 --> 3 <div ng-app="myApp" hello-directive></div> 4 5 <!-- 引入AngularJS --> 6 <script src="angular.min.js"></script> 7 <script> 8 //实例化AngularJS应用程序对象 9 var app = angular.module('myApp', []); 10 11 app.directive('helloDirective', function () { 12 return { 13 template: '我在指令构造器中创建' 14 }; 15 }); 16 </script>
JavaScript 中应避免使用全局函数，以为他们很容易被其他脚本文件覆盖
AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。
AngularJS 表单
AngularJS 表单是输入控件的集合。
HTML 控件
input 元素
select 元素
button 元素
textarea 元素
1 <div ng-app="myApp" ng-controller="myCtrl"> 2 <form novalidate> 3 First Name: <br/><input type="text" ng-model="user.firstName"/><br/> 4 Last Name: <br/><input type="text" ng-model="user.lastName"/><br/> 5 <button ng-click="reset()">RESET</button> 6 </form> 7 <p>form={{user}}</p> 8 <p>master={{master}}</p> 9 </div> 10 11 12 <!-- 引入AngularJS --> 13 <script src="angular.min.js"></script> 14 <script> 15 //实例化AngularJS应用程序对象 16 var app = angular.module('myApp', []); 17 //创建控制器 18 app.controller('myCtrl', function ($scope){ 19 //user是不固定的，master是固定的 20 $scope.master = {firstName:'John',lastName:'Doe'}; 21 $scope.user = angular.copy($scope.master); 22 $scope.reset = function (){ 23 $scope.user = angular.copy($scope.master); 24 }; 25 26 }); 27 </script>
AngularJS 输入验证
HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
ng-model 指令用于绑定输入元素到模型中
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
1 <!--$dirty 表单有填写记录 2 $valid 字段内容合法的 3 $invalid 字段内容是非法的 4 $pristine 表单没有填写记录 5 --> 6 <form novalidate name="myForm" ng-app="myApp" ng-controller="formCtrl"> 7 <h1>验证实例</h1> 8 用户名：<br/><input type="text" ng-model="user" name="user" required/> 9 <!-- 符合条件的时候显示 --> 10 <span style="color:red;" ng-show="myForm.user.$error.required">用户名是必须的。</span> 11 12 <br/><br/> 13 邮箱：<br/><input type="email" ng-model="email" name="email" required/> 14 <!-- 符合条件的时候显示 --> 15 <span style="color: red;" ng-show="myForm.email.$error.required">邮箱是必须的</span> 16 <span style="color: red;" ng-show="myForm.email.$error.email">邮箱不合法</span> 17 18 <br/><br/> 19 <button ng-disabled="myForm.user.$error.required || myForm.email.$error.required || myForm.email.$error.email">提交</button> 20 </form> 21 22 23 <!-- 引入AngularJS --> 24 <script src="angular.min.js"></script> 25 <script> 26 //实例化AngularJS应用程序对象 27 var app = angular.module('myApp', []); 28 //创建控制器 29 app.controller('formCtrl', function ($scope){ 30 $scope.user = 'John Doe'; 31 $scope.email = '[email protected]'; 32 }); 33 </script>