angularJs(一) 第一个例子todoList-蒲公英云

angularJs(一) 第一个例子todoList

angularJs都到4了，我还在看angular1.*没法子啊，必须把以前没学习的恶补上来。以前都是做hello world作为第一个例子，现在都是做todoList咯。
效果图：
这里写图片描述
1、点击提交将输入框的值放入到任务列表中
2、点击删除则就从任务列表中移出相应的元素

代码如下：

<!DOCTYPE html> <html lang="en" ng-app="todoList"> <head> <meta charset="UTF-8"> <title>todoList</title> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"> </head> <body style="padding: 15px" ng-controller="TaskCtrl"> <div class="input-group"> <input ng-model="task" type="text" class="form-control"/> <span class="input-group-btn"> <button class="btn btn-default" ng-click="add()">提交</button> </span> </div> <h4 ng-hide="tasks.length==0">任务列表</h4> <ul class="list-group"> <li ng-repeat="item in tasks track by $index" class="list-group-item"> { { item}} <a ng-click="tasks.splice($index,1)" style="cursor: pointer">删除</a> </li> </ul> </body> <script src="./angular/angular.min.js"></script> <script type="text/javascript"> angular.module('todoList', []).controller('TaskCtrl', function ($scope) { $scope.task = ""; $scope.tasks = []; $scope.add = function () { $scope.tasks.push($scope.task); } }); </script> </html>

如果用Jquery来实现代码大概如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body style="padding:15px">
<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
           <button id="submitBtn" class="btn btn-default">提交</button>
    </span>
</div>
<h4 id="listTitle" style="display: none">任务列表</h4>
<ul class="list-group" id="groupList">
</ul>
<script src="./jquery/dist/jquery.min.js"></script>
<script type="text/javascript"> function removeLi(el){ $(el).parent().remove(); } $("#submitBtn").click(function(){ var inputEl=$(this).parent().prev(); $("#groupList").append('<li class="list-group-item">'+inputEl.val()+'<a class="delHref" onClick="removeLi(this)">删除</a></li>'); if($("#listTitle").is(':hidden')){ $("#listTitle").show() } }) </script>
</body>
</html>