<!doctype html>
<html lang="en"><head>
<meta charset = "UTF-8">
<title>angularjs 进阶</title>
<script type="text/javascript" src="js/angular.min.js"></script></head><body ng-app = "app1"><!--代表angular这个环境-->
<div ng-controller="myCtrl"> <!--代表controller-->
<input type="text" ng-model = "msg"><!--model-->
{{msg}}<!--model-->
</div></body>
<script type="text/javascript">
angular.module(‘app1‘,[]).controller(‘myCtrl‘,function($scope){
$scope.msg = "angular"
})
</script></html>
2.方法的绑定
angular.module("app",[]).controller("myCtrl",function($scope){
$scope.msg = "liyang"
$scope.reverse = function(){
return $scope.msg.split("").reverse().join("") //反转字符串
}
})
<!doctype html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>angularjs 进阶</title>
</head>
<body ng-app = "app"><!--代表angular这个环境-->
<div ng-controller="myCtrl"> <!--代表controller-->
<input type="text" ng-model = "msg"><!--model-->
{{reverse()}}<!--方法的绑定-->
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myControl.js"></script>
</html>
3.事件绑定
<!DOCTYPE html>
<html>
<head>
<title>angular js进阶</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller = "myCtr">
<input type="text" ng-model="user.name">
<input type="text" ng-model="user.pwd"> <!--模型绑定-->
<div ng-click = "loginAction()">登录</div><!--事件绑定-->
</body>
<script type="text/javascript">
app = angular.module("app",[]);
app.controller("myCtr",function($scope){
$scope.user={name:"",pwd:""}
$scope.loginAction=function(){
alert($scope.user.name)
}
})
</script>
</html>
时间： 2024-10-03 23:04:46