转行学开发,代码100天——2018-04-07
今天用AngularJS照着课程写了一个案例,即toDoList,记事清单效果。
主要实现以下效果:
1.通过文本框添加内容,同时添加事件列表。主要用到ng-model=”task”对input输入框进行数据绑定,通过ng-click=”add()”事件为按钮添加响应——将输入内容显示到文本框下列表栏中。
2.细节处理1:“任务列表”文字的显隐,即在事件数目>0时才显示,ng-if=”tasks.length>0″或者ng-hide=”tasks.length==0″. 但二者更倾向于前者,区别在于后者是创建了“任务列表”元素,只是设置了隐藏。
3.细节处理2:当输入相同列表事件内容时,并不会实现事件新增。因此需要在<li>标签里新增ng-repeat=“item in tasks track by $index”,其中,item是事件项变量,tasks是事件数组,by $index 即按照序号。
<!DOCTYPE html>
<html ng-app="todoList">
<head>
<meta charset="utf-8">
<title>todoList</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="TrackCtrl">
<div >
<input ng-model="task" type="text" ></input>
<span class="input-group-btn">
<button ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>
<li ng-repeat="item in tasks track by $index " >{{item}}<a href="#" rel="external nofollow" ng-click="tasks.splice($index,1)">删除</a></li>
</body>
<script type="text/javascript">
angular.module('todoList',[]).controller('TrackCtrl',function($scope) {
$scope.task ="";
$scope.tasks =[];
$scope.add = function()
{
$scope.tasks.push($scope.task);
}
})
</script>
</html>
实现效果如下:
此外,通过“删除”事件,可以将本行事项删除。