angular 入门
入门
<!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>
浙公网安备 33010602011771号