AngularJS（一）
来源：互联网 发布：网络交换机有辐射吗 编辑：程序博客网 时间：2024/05/21 08:09
标准形式创建module与controller
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>standard</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script></head><script> var myAppModule=angular.module('myApp',[]); myAppModule.controller('TextController', function($scope){ var someText={}; someText.message="文本信息"; $scope.someText=someText; } );</script><body ng-controller="TextController"> <p>{{someText.message}}</p></body></html>ng-change
$watch
<!DOCTYPE html><html lang="en" ng-app="estimateModule"><head> <meta charset="UTF-8"> <title>findingEstimate</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script> var myModule=angular.module('estimateModule',[]); /*myModule.controller('estimateController', function($scope){ $scope.funding={startingEstimate:0}; $scope.computeNeeded=function(){ $scope.funding.needed=$scope.funding.startingEstimate*10; }; });*/ function StartUpController($scope){ $scope.funding={startingEstimate:0}; computeNeeded=function(){ $scope.funding.needed=$scope.funding.startingEstimate*10; }; $scope.$watch('funding.startingEstimate',computeNeeded); } </script></head><body><form ng-controller="estimateController"> Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"> Recommendation:{{funding.needed}}</form></body></html>ng-submit
<!DOCTYPE html><html lang="en" ng-app="myModule"><head> <meta charset="UTF-8"> <title>formRequest</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script> var myModule=angular.module('myModule',[]); function formController($scope){ $scope.computeNeeded=function(){ $scope.needed=$scope.startingEstimate*10; }; $scope.requestFunding=function(){ window.alert("sorry you are not qualified"); } } </script></head><body ng-controller="formController"><form ng-submit="requestFunding()"> Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate"> Recommendation:{{needed}} <button>Fund my start up</button></form></body></html>reset
<!DOCTYPE html><html lang="en" ng-app="MyModule"><head> <meta charset="UTF-8"> <title>reset</title></head><script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script><script> var myModule=angular.module('MyModule',[]); myModule.controller('formController', function($scope){ $scope.requestFunding=function(){ window.alert("sorry your money is not enough!") }; $scope.computeNeeded=function(){ $scope.needed=$scope.startingEstimate*10; }; $scope.reset=function(){ $scope.startingEstimate=0; $scope.needed=0; }; $scope.alert=function(){ window.alert("钱不够！"); } } );</script><body><form ng-controller="formController" ng-submit="requestFunding()"> starting: <input ng-model="startingEstimate" ng-change="computeNeeded()"> Recommendation:{{needed}} <button ng-click="reset()">reset</button> <button ng-click="alert()">fundMyStartUp</button></form></body></html>ng-repeat
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>repeat</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script> var students=[ {name:'jack',id:'1'}, {name:'tom',id:'2'}, {name:'jerry',id:'2'}, ] function stuController($scope){ $scope.studentList=students; } </script></head><body ng-controller="stuController"><ul> <li ng-repeat="s in studentList"> <a href="#">{{s.name}}</a> </li></ul></body></html>$first $middle $last<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>index</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script> var album=[ {name:'south',duration:'2:20'}, {name:'north',duration:'3:20'}, {name:'west',duration:'4:20'} ] function AlbumController($scope){ $scope.album=album; } </script></head><body ng-controller="AlbumController"><table> <tr ng-repeat="a in album"> <td>{{$index+1 }}</td> <td>{{a.name }}</td> <td>{{a.duration }}</td> </tr></table></body></html>ng-show
ng-hide
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>showhide</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script> function showHideController($scope){ $scope.menuState={show:true}; $scope.toggleMenu=function(){ $scope.menuState.show=!$scope.menuState.show; } } </script></head><body><div ng-controller="showHideController"> <button ng-click="toggleMenu()">显示/隐藏</button> <ul ng-show="menuState.show"> <li ng-click="stun()">Stun</li> <li ng-click="disIntegrate()">DisIntegrate</li> <li ng-click="erase()">Erase from history</li> </ul></div></body></html>通过双向数据绑定来控制CSS样式
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>cssControl</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <style type="text/css"> .menu-disable-true{ color:gray; } </style> <script> function cssController($scope){ $scope.isDisabled=false; $scope.stun=function(){ $scope.isDisabled=true; } } </script></head><body><div ng-controller="cssController"> <ul> <li class="menu-disable-{{isDisabled}}">Stun</li> <button ng-click="stun()">disable</button> </ul></div></body></html>error warning
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>errorWarning</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <style type="text/css"> .error{ background-color: red; } .warning{ background-color: green; } </style> <script> function HeaderController($scope){ $scope.isError=false; $scope.isWarning=false; $scope.showError=function(){ $scope.isError=true; $scope.isWarning=false; $scope.messageText="这是错误的文本内容"; } $scope.showWarning=function(){ $scope.isWarning=true; $scope.isError=false; $scope.messageText="这是警告的文本信息" } } </script></head><body> <div ng-controller="HeaderController"> <div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div> <button ng-click="showError()">SimulateError</button> <button ng-click="showWarning()">SimulateWarning</button> </div></body></html>选中后改变该行的颜色
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>selected</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <style type="text/css"> .selected{ background-color: lightgreen; } </style> <script> function restaurantController($scope){ $scope.directory=[ {name:'hello',place:'china'}, {name:'world',place:'japan'}, {name:'kitty',place:'UK'} ]; $scope.selectRestaurant=function(row){ $scope.selectedRow=row; } } </script></head><body> <table ng-controller="restaurantController"> <tr ng-repeat="r in directory" ng-click="selectRestaurant($index)" ng-class="{selected:$index==selectedRow}" > <td>{{r.name}}</td> <td>{{r.place}}</td> </tr> </table></body></html>ng-src
ng-href
控制器在应用中的三个作用
2.在应用模型中设置初始状态
3.通过$scope向视图暴露模型和函数
4.监视模型发生变化的其他部分并做出相应的动作
通过表达式发布模型数据
<!DOCTYPE html><html lang="en" ng-app><head> <meta charset="UTF-8"> <title>setCount</title> <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script> <script> function countController($scope){ $scope.count=1; $scope.setCount=function(){ $scope.count=3; }; } </script></head><body> <div ng-controller="countController"> <button ng-click="setCount()">set count three</button> <button ng-click='count=4'>set count four</button> <p>{{count}}</p> </div></body></html> 0 0
- angularJs（一）指令
- AngularJS入门（一）
- AngularJS初探（一）
- AngularJS学习（一）
- AngularJS学习（一）
- AngularJS学习（一）
- angularjs学习（一）
- AngularJS教程（一）
- AngularJS入门（一）
- AngularJs（一）概述
- AngularJS实例教程（一）
- AngularJS（一）
- AngularJS（一）指令
- AngularJS动画（一）
- AngularJS 初探（一）
- AngularJS 教程（一）
- AngularJS（一）
- AngularJS详解（一）
- C/C++中extern关键字详解
- iOS 应用开发中的断点续传实践总结
- CodeForces 701B Cells Not Under Attack 思维题
- Tensorflow 分布式部署简介
- 后台开发工程师面试题
- AngularJS（一）
- AcDbBlockTableRecord+AcDbBlockReference AcDbAttribute+AcDbAttributeDefination 项目总结
- POJ 2955 Brackets (区间DP)
- 【NOIP2016提高A组模拟8.14】火神的鱼
- Linux 下 在 Github 上下载指定文件夹或者文件
- Linux进程线程学习笔记：运行新程序
- hdu5842-Lweb and String-续缘之路
- hdu 1728 逃离迷宫(dfs+剪枝)
- java 快速排序的思想及解释说明
