angularJs(一) 第一个例子todoList

最新推荐文章于 2018-12-16 16:58:57 发布

飞天代码

最新推荐文章于 2018-12-16 16:58:57 发布

阅读量406

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/76522191

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
angularJs(一) 第一个例子todoList

angularJs都到4了，我还在看angular1.*没法子啊，必须把以前没学习的恶补上来。以前都是做hello world作为第一个例子，现在都是做todoList咯。效果图： 1、点击提交将输入框的值放入到任务列表中 2、点击删除则就从任务列表中移出相应的元素代码如下：<!DOCTYPE html><html lang="en" ng-app="todoList"><head>
复制链接

扫一扫