标签:ESS col splay event 技术 控制 初始 strong --
入门
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body ng-app> {{100+100}} </body> </html>
双向绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body ng-app> 喜欢谁 <input type="text" ng-model="myname" /> 喜欢{{myname}} </body> </html>
初始化值1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <body ng-app ng-init="myname=‘proyuan‘"> 请输入你的姓名:<input ng-model="myname"> 你的名字是{{myname}} </body> </body> </html>
两数相加
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var app=angular.module(‘MyApp‘,[])
app.controller(‘mycontroller‘,function($scope){
$scope.add=function(){
return parseInt($scope.x)+parseInt($scope.y)
}
});
</script>
</head>
<body ng-app=‘MyApp‘ ng-controller=‘mycontroller‘>
<!--ng-controller为程序添加控制器-->
x:<input ng-model="x" />
y:<input ng-model="y" />
结果{{add()}}
</body>
</html>
点击事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <script> var app=angular.module(‘MyApp‘,[]) app.controller(‘mycontroller‘,function($scope){ $scope.add=function(){ $scope.z=parseInt($scope.x)+parseInt($scope.y) } }); </script> </head> <body ng-app=‘MyApp‘ ng-controller=‘mycontroller‘> <!--ng-controller为程序添加控制器--> x:<input ng-model="x" /> y:<input ng-model="y" /> <button ng-click="add()">点击</button> 结果{{z}} </body> </html>
循环数组(注意集合不能重复...)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <script> var app = angular.module(‘myApp‘,[]) app.controller(‘mycontroller‘,function($scope){ $scope.list=[66,87,43,32,08]; }); </script> </head> <body ng-app="myApp" ng-controller="mycontroller"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html>
循环数组对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> <script> var app=angular.module(‘MyApp‘,[]) app.controller(‘mycontroller‘,function($scope){ $scope.list=[ {name:‘sx‘,address:‘保定‘,tel:1515}, {name:‘xy‘,address:‘保定‘,tel:1515}, {name:‘sy‘,address:‘保定‘,tel:1515} ] }); </script> </head> <body ng-app="MyApp" ng-controller="mycontroller"> <table> <tr> <td>姓名</td> <td>地址</td> <td>电话</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.address}}</td> <td>{{entity.tel}}</td> </tr> </table> </body> </html>
标签:ESS col splay event 技术 控制 初始 strong --
原文地址:https://www.cnblogs.com/proyuan/p/11847894.html