angular-todolist
<body ng-controller="todoListCtrl">
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus
ng-model='inp_val'
ng-keyup="myKeyup($event)"
>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input class="toggle-all" type="checkbox">
<label>Mark all as complete</label>
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li ng-repeat="todo in todos" class="completed">
<div class="view">
<input type="checkbox" ng-model="todo.done" class="toggle">
{{todo.done}}
<label>{{todo.text}}</label>
<button class="destroy" ng-click="delet()"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li ng-repeat="act in acts" ng-click="tg($index)">
<a href={{act.path}} ng-class="{true:'selected',false:''}[act.ok]">{{act.name}}</a>
<span ng-if="act.ok">{{act.count()}}</span>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script>
var todo = angular.module('todo', []);
todo.controller('todoListCtrl', ['$scope', function($scope){
/*这里是计算部分*/
$scope.acts=[
{name:'all',count:function () {
return $scope.todos.length
},path:'#/'},
{name:'Active',count:function () {
var i=0;
$scope.todos.forEach(function (ele) {
if(!ele.done){
i++
}
});
return i;
},path:'#/active'},
{name:'Completed',count:function () {
var lent= $scope.todos.length;
console.log(lent)
var i=0;
$scope.todos.forEach(function (ele) {
if(!ele.done){
i++;
}
});
var end=lent-i;
console.log('end'+end)
return end
},path:'#/completed'}
];
$scope.he='111';
$scope.ok=false;
$scope.tg=function (index) {
$scope.acts[index].ok=!$scope.acts[index].ok;
console.log($scope.acts[index].ok);
};
$scope.todos = [
{text:'Taste JavaScript',done:false},
{text:'Buy a unicorn',done:false}
];
/*按回车引用todo添加功能*/
$scope.myKeyup = function(e){
//IE 编码包含在window.event.keyCode中，Firefox或Safari 包含在event.which中
var keycode = window.event?e.keyCode:e.which;
if(keycode==13){
$scope.addTodo();
}
};
/*这里是数组添加 push可以添加一个对象作为数组的一个元素*/
$scope.addTodo=function () {
console.log($scope.inp_val);
$scope.todos.push({
text: $scope.inp_val,
done:false
})
$scope.inp_val=''
}
/*这里是统计整个数组里面done=false的数量，这里的done跟input用ng-model双向绑定*/
$scope.remain=function () {
var i=0
$scope.todos.forEach(function (ele) {
if(!ele.done){
i++
}
})
return i;
}
/*这是在数组中删掉当前todo，这里的todo实际是个索引*/
$scope.delet=function () {
console.log(todo)
console.log(1)
//在todos数组中将当前todo删去
$scope.todos.splice(todo,1);
console.log(todo)
}
}]);
</script>
</body>
</html>
浙公网安备 33010602011771号