AngularJS学习笔记1

来源：互联网发布：数据法则txt下载编辑：程序博客网时间：2024/05/17 04:51

使用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);

附:下载

0 0