溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下所示：
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<style>
body {
padding: 0;
margin: 0;
}
.todo {
width: 300px;
margin: 100px auto;
}
.todo dd {
overflow: hidden;
}
.todo input[type="checkbox"] {
float: left;
}
.todo a {
float: right;
}
</style>
</head>
<body>
<div class="todo" ng-controller="TodoListController">
<form ng-submit="addItem()">
<label for="">添加事項</label>
<input type="text" ng-model="todo">
</form>
<dl>
<dt>待辦事項</dt>
<dd ng-repeat="todo in todos track by $index">
<input type="checkbox" ng-checked="todo.checked" ng-click="done($index, $event)">
{{todo.text}}
<a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index, todos)">刪除</a>
</dd>
<dt>已辦事項{{doneTodos.length}}</dt>
<dd ng-repeat="todo in doneTodos track by $index">
<input type="checkbox" ng-checked="todo.checked" ng-click="undone($index, $event)">
{{todo.text}}
<a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index, doneTodos)">刪除</a>
</dd>
</dl>
</div>
<script src="./libs/angular.min.js"></script>
<script>
// 定義一個模塊
var App = angular.module('App', []);
// 定義一個控制器
App.controller('TodoListController', ['$scope', function($scope) {
// 待辦事項
$scope.todos = [];
// 已完成事項
$scope.doneTodos = [];
// $scope.todo = '';
// 回車時調用ng-submit，往待辦事項中添加數據
$scope.addItem = function () {
// 向數組中添加數據
$scope.todos.push({text:$scope.todo, checked: false});
// 清空輸入框
$scope.todo = '';
}
// 勾選時完成
$scope.done = function (index, ev) {
// console.log(index);
// console.log($scope.todos);
// 從待辦事項中刪除
var tmp = $scope.todos.splice(index, 1);
tmp[0].checked = !tmp[0].checked;
// 將刪除的事項添加到已完成里
$scope.doneTodos = $scope.doneTodos.concat(tmp);
ev.preventDefault();
}
// 取消已完成
$scope.undone = function (index, ev) {
// 從已完成數據中刪除
var tmp = $scope.doneTodos.splice(index, 1);
tmp[0].checked = !tmp[0].checked;
// 將事項添加到待辦事項中
$scope.todos = $scope.todos.concat(tmp);
// ev.preventDefault();
}
// 刪除事項，傳遞當前索引和完整數據
$scope.delete = function (index, todos) {
// $scope.doneTodos.splice(index, 1);
// console.log(todos);
// 刪除索引值對應的事項
todos.splice(index, 1);
}
}])
// var arr = [0, 1, 2, 3, 4];
// arr.splice(2,1)
</script>
</body>
</html>
以上這篇AngularJS動態添加數據并刪除的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
