AngularJS DEMO - 不断更新中

发布时间：2020-12-17 09:32:01 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtmlheadtitleAngular DEMO 1/titlescript type="text/javascript" src="/bower_components/angularjs/angular.js"/script/headbody ng-app ng-init="name='World'" h1Hello,{{name}}!/h1/body/html !DOCTYPE htmlhtmlheadtitleAngular DEMO 2/

<!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',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>

tips：

本文由wp2Blog导入，原文链接：http://devonios.com/index.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!