AngularJS DEMO – 不断更新中

<!DOCTYPE html>
<html>
<head>
	<title>Angular DEMO 1</title>
	<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
</head>
<body ng-app ng-init="name='World'" >
	<h1>Hello,{{name}}!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Angular DEMO 2</title>
	<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
</head>
<body ng-app ng-init="name='World'" >
	Say hello to : <input type="text" ng-model="name" />
	<h1>Hello,{{name}}!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Angular DEMO 3</title>
	<link type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
	<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
	<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
	<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>

</head>
<body ng-app="app" >
	<div ng-controller="HelloCtrl">
		Say hello to : <input type="text" ng-model="name" />
		<h1>Hello,{{name}}!</h1>
		<h1>Hello,{{getName()}}!</h1>
	</div>
	<script>
	angular.module('app', [])
	.controller('HelloCtrl',['$scope',function($scope){
		$scope.name='World';
		$scope.getName=function(){
			return $scope.name;
		}
	}]);
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Angular DEMO 4</title>
	<link type="text/css" rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
	<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
	<script type="text/javascript" src="/bower_components/angularjs/angular.js"></script>
	<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
	<style type="text/css">
.text-warning{
	color:red;
}
	</style>
</head>
<body ng-app="app" >
	<div class="container" ng-controller="Demo4Ctrl">
		<div class="row">
			<p>Remaining:<span ng-class="{'text-warning':shoudWarn()}" ng-bind="remain()"></span></p>
			<textarea ng-model="text">{{text}}</textarea> 
		</div>
		<div class="row">
			<button ng-disabled="!hasValidLength()" class="btn btn-primary" ng-click="send()">Send</button>
			<button class="btn btn-warning" ng-click="clear()">Clear</button>
		</div>
	</div>	
	<script>
	angular.module('app',[])
	.controller('Demo4Ctrl',['$scope',function($scope){
		$scope.text="";
		var MAX_LENGTH=20;
		var WARN_THRESHOLD = 5;
		$scope.remain = function(){
			return MAX_LENGTH - $scope.text.length;
		};
		$scope.hasValidLength=function(){
			return $scope.text.length<=MAX_LENGTH;
		};
		$scope.shoudWarn=function(){
			return $scope.remain()<WARN_THRESHOLD;
		}
	}]);
	</script>
</body>
</html>

 

Leave a Comment

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据