angular入门几段代码(一)

<!DOCTYPE html>
<html>
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
    <!--这里的ng-app标识模块,跟下面你那个声明的对应,控制器同理-->
	<div ng-app="xk" ng-controller="ctl">
		<input type="text" ng-model="name">
		{{name}}
	</div>
<script>
	var m = angular.module('xk', []);//模块声明
	m.controller('ctl', ['$scope', function($scope){
		$scope.name = 'lalala';
	}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		商品名称:{{goods.data.name}}<br/>
		价格:{{goods.data.price}}<br/>
		购买数量:{{goods.data.num}}<br/>
		价格:{{goods.data.price*goods.data.num}}<br/>
		<button ng-click="goods.add()">增加</button>
		<button ng-click="goods.del()">减少</button>
		
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		$scope.goods = {
			'data':{'name':'固态硬盘','price':800,'num':0},
			del:function(){
				$scope.goods.data.num = Math.max(--$scope.goods.num, 0);
			},
			add:function(){
				$scope.goods.data.num++;
			}
		};
	}]);
</script>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		商品:<input type="text" ng-model="goods.name" readonly="readonly"><br/>
		价格:<input type="text" ng-model="goods.price" readonly="readonly"><br/>
		数量:<input type="text" ng-model="goods.num"><br/>
		总价:<input type="text" ng-value="goods.price*goods.num" readonly="readonly"><br/>
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		$scope.goods = {'name':'路由器', 'price':2500, 'num':0};
	}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		网站开启:
		<input type="radio" ng-model="status" ng-value="1">开启
		<input type="radio" ng-model="status" ng-value="0">关闭
		<div ng-show="status==0">
			<h2>关闭原因</h2>
			<textarea>网络正在维护中,请在凌晨1点至两点之间访问</textarea>
		</div>
	</div>
<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope', function($scope){
		$scope.status = 1;
	}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<script src="../angular/angular1.4.6.min.js"></script>
	<title></title>
</head>
<body>
	<div ng-app="xk" ng-controller="ctl">
		游戏:<input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0">
		电影:<input type="checkbox" ng-model="data.video" ng-true-value="1" ng-false-value="0">
		<div ng-show="data.game==1">
			<p>游戏</p>
			<textarea></textarea>
		</div>
		<div ng-show="data.video==1">
			<p>电影</p>
			<textarea></textarea>
		</div>
	</div>

<script>
	var m = angular.module('xk', []);
	m.controller('ctl', ['$scope',function($scope){
		$scope.data = {'game':0, 'video':0};
	}]);
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_36580691/article/details/88764678
今日推荐