一个AngularJS的小栗子 - todoList

时间 2019-11-18

标签一个 angularjs 栗子 todolist 栏目 AngularJS 繁體版

原文原文链接

这是一个学习AngularJS中的一个栗子，todoList，把学习过程记录下来，便于之后练习。javascript

首先，咱们来建立html，为了美化我使用了BootStrap，代码以下：css

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>todoList</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body style="padding: 10px;">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default">提交</button>
      </span>
    </div>
    <h4>任务列表</h4>
    <ul class="list-group">
      <li class="list-group-item">1</li>
      <li class="list-group-item">2</li>
      <li class="list-group-item">3</li>
    </ul>
  </body>
  <script src="http://cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
  <script src="app.js"></script>
</html>

为了养成良好的习惯，我吧AngularJS的代码写在app.js文件里html

咱们先在html里使用ng-app来声明AngularJS的管理边界，并指定这个模块的名称todoListjava

<html lang="zh-CN" ng-app="todoList">

app.js:git

'use strict';

angular.module('todoList', [])     // 使用angular的module方法声明模块todoList
.controller('TaskCtrl', function($scope){    //生成控制器TaskCtrl
  $scope.task = '';            //在$scope上定义变量task
  $scope.tasks = [];           //在$scope上定义空数组变量tasks
})

接着，咱们在body标签中加入定义的控制器TaskCtrlgithub

<body ng-controller="TaskCtrl">

在input标签中使用ng-model指令绑定输入，也就是把输入与变量task绑定起来bootstrap

<input type="text" class="form-control" ng-model="task">

如今咱们为提交按钮添加一个添加列表事件，在button里使用ng-click添加事件数组

<button class="btn btn-default" ng-click="addItem()">提交</button>

在app.js里响应这个事件app

'use strict';

angular.module('todoList', [])     // 使用angular的module方法声明模块todoList
.controller('TaskCtrl', function($scope){    //生成控制器TaskCtrl
  $scope.task = '';            //在$scope上定义变量task
  $scope.tasks = [];           //在$scope上定义空数组变量tasks
  $scope.addItem = function() {
    $scope.tasks.push($scope.task);  
  }
})

最后咱们在html里使用指令ng-repeat来遍历用户输入，并把他们显示到下面的列表当中ide

<ul class="list-group">
  <li class="list-group-item" ng-repeat="item in tasks track by $index">
    {{item}}
  </li>
</ul>

ng-repeat指令里的内容表示，使用项目下标来遍历并输入列表项

至此咱们就完成了一个简单的Angular应用，todoList，可是有两个问题咱们来完善下，一是项目列表能够添加一个删除，还有就是那个<h4>任务列表</h4>,能够在没有列表项时将其隐藏

咱们先来隐藏这个<h4>任务列表</h4>,有两种方式，分别使用ng-hide和ng-if均可以实现

<h4 ng-hide="tasks.length==0">任务列表</h4>
// 列表项数组长度为0时，将此标签隐藏

<h4 ng-if="tasks.length > 0">任务列表</h4>
// 列表项数组长度大于0时才显示这个标签

在实际应用中推荐使用ng-if指令，由于这个指令不会在DOM中建立对应的标签，而ng-hide无论对应的标签是否隐藏或显示，都会建立。

而另一个，在列表项中建立一个删除

<ul class="list-group">
  <li class="list-group-item" ng-repeat="item in tasks track by $index">
    {{item}} <a ng-click="tasks.splice($index,1)">删除</a>
  </li>
</ul>

这个练习小项目我放在了github上，有兴趣的同窗能够fork下。

github： https://github.com/kaindy7633/todoList