angularJs(一) 第一个例子todoList

来源：互联网发布：珂莱欧淘宝旗舰店编辑：程序博客网时间：2024/05/16 04:54

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>

优劣势一眼就可以看出来咯。
angularJs结构清晰，便于维护，但前提是要非常熟悉angularJs的实现原理和封装的API。
Jquery：存在了大量的dom操作，而且需要对jquery的选择器非常熟悉。代码维护比较麻烦。

阅读全文

0 0