<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body ng-app="uniqApp"> <div ng-controller="firstCtr"> <p>{{123}}</p> <p>{{param}}</p> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('uniqApp',[]) .controller('firstCtr',['$scope',function(a){ a.param='abc'; }]) </script></body> </html>
<!DOCTYPE html> <html> <head></head> <body ng-app="uniqApp"> <div ng-controller="firstCtrl"> <p>{{123}}</p> <p>{{param}}</p> </div> <div ng-controller="secondCtrl"> <p>{{param}}</p> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('uniqApp',[]) .controller('firstCtrl',['$scope',function($scope){ $scope.param='abc'; }]) .controller('secondCtrl',['$scope',function(foo){ foo.param='bar'; }]); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>计算器示例</title> </head> <body ng-app="topApp"> <div ng-controller="calculator"> <p><h2>计算总价</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <p>{{getTotal()}}</p> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('topApp',[]) .controller('calculator',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.getTotal=function($scope){ return this.count*this.price; } }]); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>计算器示例</title> </head> <body ng-app="topApp"> <div ng-controller="calculator"> <p><h2>计算总价</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <p>{{getTotal()}}</p> </div> <div ng-controller="calculatorMan"> <p><h2>计算总价（手动）</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <button ng-click="getTotal()" style="display:block">计算</button> <p>{{totalPrice}}</p> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('topApp',[]) .controller('calculator',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.getTotal=function($scope){ return this.count*this.price; } }]) .controller('calculatorMan',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.totalPrice=20; $scope.getTotal=function($scope){ this.totalPrice = this.count*this.price; } }]);; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>计算器示例</title> </head> <body ng-app="topApp"> <div ng-controller="calculator"> <p><h2>计算总价(自动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <p>{{getTotal()}}</p> </div> <div ng-controller="calculatorMan"> <p><h2>计算总价(手动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <button ng-click="getTotal()" style="display:block">计算</button> <p>{{totalPrice}}</p> </div> <div ng-controller="repeatCtrl"> <ul> <li ng-repeat="person in persons"> {{person.userName+'-------'+person.age}} </li> </ul> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('topApp',[]) .controller('calculator',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.getTotal=function($scope){ return this.count*this.price; } }]) .controller('calculatorMan',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.totalPrice=20; $scope.getTotal=function($scope){ this.totalPrice = this.count*this.price; } }]) .controller('repeatCtrl',['$scope',function(repeatScope){ repeatScope.persons=[{userName: 'kobe',age : 39}, {userName: 'kobe2',age : 39}, {userName: 'kobe3',age : 39}, {userName: 'kobe4',age : 39}, {userName: 'kobe5',age : 39}, {userName: 'kobe6',age : 39}, {userName: 'kobe7',age : 39} ] }]); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>计算器示例</title> </head> <body ng-app="topApp"> <div ng-controller="calculator"> <p><h2>计算总价(自动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <p>{{getTotal()}}</p> </div> <div ng-controller="calculatorMan"> <p><h2>计算总价(手动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <button ng-click="getTotal()" style="display:block">计算</button> <p>{{totalPrice}}</p> </div> <div ng-controller="repeatCtrl"> <ul> <li ng-repeat="person in persons"> {{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}} </li> </ul> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('topApp',[]) .controller('calculator',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.getTotal=function($scope){ return this.count*this.price; } }]) .controller('calculatorMan',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.totalPrice=20; $scope.getTotal=function($scope){ this.totalPrice = this.count*this.price; } }]) .controller('repeatCtrl',['$scope',function(repeatScope){ repeatScope.persons=[{userName: 'kobe',age : 39}, {userName: 'kobe2',age : 39}, {userName: 'kobe3',age : 39}, {userName: 'kobe4',age : 39}, {userName: 'kobe5',age : 39}, {userName: 'kobe6',age : 39}, {userName: 'kobe7',age : 39} ] }]); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>计算器示例</title> </head> <body ng-app="topApp"> <div ng-controller="calculator"> <p><h2>计算总价(自动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <p>{{getTotal()}}</p> </div> <div ng-controller="calculatorMan"> <p><h2>计算总价(手动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <button ng-click="getTotal()" style="display:block">计算</button> <p>{{totalPrice}}</p> </div> <div ng-controller="repeatCtrl"> <ul> <li ng-repeat="person in persons"> {{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}} </li> </ul> </div> <div ng-controller="toggleCtrl"> <p ng-show="isTrue" ng-bind="param"></p> <p ng-hide="isTrue" ng-bind="param2"></p> <button ng-click="switchToggle()">切换按钮</button> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('topApp',[]) .controller('calculator',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.getTotal=function($scope){ return this.count*this.price; } }]) .controller('calculatorMan',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.totalPrice=20; $scope.getTotal=function($scope){ this.totalPrice = this.count*this.price; } }]) .controller('repeatCtrl',['$scope',function(repeatScope){ repeatScope.persons=[{userName: 'kobe',age : 39}, {userName: 'kobe2',age : 39}, {userName: 'kobe3',age : 39}, {userName: 'kobe4',age : 39}, {userName: 'kobe5',age : 39}, {userName: 'kobe6',age : 39}, {userName: 'kobe7',age : 39} ] }]) .controller('toggleCtrl',['$scope',function(toggleScope){ toggleScope.isTrue=true; toggleScope.param='这是真的'; toggleScope.param2='这是假的'; toggleScope.switchToggle=function(){ toggleScope.isTrue=!toggleScope.isTrue; } }]) ; </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>计算器示例</title> <style> .oddClass{ background:red; } .evenClass{ background:green; } </style> </head> <body ng-app="topApp"> <div ng-controller="calculator"> <p><h2>计算总价(自动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <p>{{getTotal()}}</p> </div> <div ng-controller="calculatorMan"> <p><h2>计算总价(手动)</h2></p> <p><label>数量</label><input type="number" ng-model="count"></p> <p><label>单价</label><input type="number" ng-model="price"></p> <button ng-click="getTotal()" style="display:block">计算</button> <p>{{totalPrice}}</p> </div> <div ng-controller="repeatCtrl"> <ul> <li ng-repeat="person in persons"> {{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}} </li> </ul> </div> <div ng-controller="toggleCtrl"> <p ng-show="isTrue" ng-bind="param"></p> <p ng-hide="isTrue" ng-bind="param2"></p> <button ng-click="switchToggle()">切换按钮</button> <div style="180px;height:200px;" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="eventStyle"></div> <ul> <li ng-class="{oddClass:$odd,evenClass:$even}" ng-repeat="person in persons" ng-bind="{{person.userName+'---------'+person.age}}"> </li> </ul> </div> <script type="text/javascript" src="./angular.js"></script> <script type="text/javascript"> angular.module('topApp',[]) .controller('calculator',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.getTotal=function($scope){ return this.count*this.price; } }]) .controller('calculatorMan',['$scope',function($scope){ $scope.count=2; $scope.price=10; $scope.totalPrice=20; $scope.getTotal=function($scope){ this.totalPrice = this.count*this.price; } }]) .controller('repeatCtrl',['$scope',function(repeatScope){ repeatScope.persons=[{userName: 'kobe',age : 39}, {userName: 'kobe2',age : 39}, {userName: 'kobe3',age : 39}, {userName: 'kobe4',age : 39}, {userName: 'kobe5',age : 39}, {userName: 'kobe6',age : 39}, {userName: 'kobe7',age : 39} ] }]) .controller('toggleCtrl',['$scope',function(toggleScope){ toggleScope.isTrue=true; toggleScope.param='这是真的'; toggleScope.param2='这是假的'; toggleScope.switchToggle=function(){ toggleScope.isTrue=!toggleScope.isTrue; } toggleScope.persons=[{userName:'tom',age:40}, {userName:'tom2',age:40}, {userName:'tom3',age:40}, {userName:'tom4',age:40}, {userName:'tom5',age:40} ]; toggleScope.eventStyle={background:'red'}; toggleScope.enter=function(){ toggleScope.eventStyle={background:'green'} } toggleScope.leave=function(){ toggleScope.eventStyle={background:'red'} } }]) ; </script> </body> </html>