AngularJS学习笔记1

最新推荐文章于 2024-08-25 18:26:48 发布

怪我冷i

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量502

点赞数

分类专栏： javaScript 大前端文章标签： html css javascript angularjs

javaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

大前端

18 篇文章 0 订阅

订阅专栏

使用AngularJS开发现代Web应用程序

先看效果

效果：

html代码

html:

<!DOCTYPE html>
<html >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
 
	<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
	 <style type="text/css">
		body.container{
			max-width:600px;
		}
		.checkbox{
			margin-bottom: 0;
			margin-right: 20px;
		}
		.done{
			color:#aaa;
		}
		.done > .checkbox >label > span {
			text-decoration:line-through;
	 	}
	 </style>
</head>
<body ng-app="TodoApp" class="container">
	<header>
		<h1 class="display-3">任务列表</h1>
		<hr>
	</header>
	<section ng-controller="MainController">
		<form class="input-group input-group-lg">
			<input type="text"  class="form-control" ng-model="text">
			<span class="input-group-btn">
				<button class="btn btn-secondary" ng-click="add()">添加</button>
			</span>
		</form>
		<ul class="list-group m-y-2">
			<li class="list-group-item " ng-class="{'done':item.done}" ng-repeat="item in todoList">
				<button type="button" class="close" aria-label="Close" 
				ng-click="delete(item)">
				<span aria-hidden="true">×</span>
				<span class="sr-only">Close</span>
				</button>

				<div class="checkbox">
					<label >
					<input type="checkbox" ng-model="item.done">
					<span>{{item.text}}</span>
					</label>
				</div>
			</li>
			
		</ul>
		<p>总共<strong>{{todoList.length}}</strong>个任务,已完成<strong>{{doneCount()}}</strong>个</p>
	</section>

	<script src="node_modules/angular/angular.js"></script>
	<script src="app.js"></script>
	
</body>
</html>

JS代码

app.js:

(function(window){

	//注册一个应用程序的主模块,module方法如果只传入一个参数就不是创建一个新的模块
	window.angular.module('TodoApp',[]);
	 
	window.angular.module('TodoApp').controller('MainController',['$scope',function($scope){
		//$scope的作用就是往视图中暴露数据的
		$scope.text='';//会各文本框做双向绑定

		//任务列表 数据这里
		$scope.todoList = [{
			text:'学习AngularJS基础',
			done:false
		},{
			text:'学习React基础',
			done:false
		}];

		$scope.add=function(){
			var text = $scope.text.trim();
			if(text){
				$scope.todoList.push({
					text:text,
					done:false
				});
			}
			$scope.text='';
		};
		$scope.delete=function(todo){
			var index = $scope.todoList.indexOf(todo);
			$scope.todoList.splice(index,1);
		};

		$scope.doneCount=function(){
			var temp = $scope.todoList.filter(function(item){
				return item.done;
			});
			return temp.length;
		};
	}]);

})(window);

附:下载

怪我冷i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习笔记1

使用AngularJS开发现代Web应用程序先看代码：html: Document body.container{ max-width:600px; } .checkbox{ margin-bottom: 0; margin-right: 20px; } .done{ color:#aaa; } .done >
复制链接

扫一扫

专栏目录