AngularJS动态添加数据并删除的实例

前端之家收集整理的这篇文章主要介绍了AngularJS动态添加数据并删除的实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如下所示:

<Meta charset="UTF-8"> TodoList
<div class="todo" ng-controller="TodoListController"&gt;
    <form ng-submit="addItem()"&gt;
        <label for=""&gt;<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>事项</label>
        <input type="text" ng-model="todo"&gt;
    </form>
    <dl>
        <dt>待办事项</dt>
        <dd ng-repeat="todo in todos track by $index"&gt;
            <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" ng-checked="todo.checked" ng-click="done($index,$event)"&gt;
            {{todo.text}}
            <a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index,todos)"&gt;删除</a>
        </dd>
        <dt>已办事项{{doneTodos.length}}</dt>
        <dd ng-repeat="todo in doneTodos track by $index"&gt;
            <input type="checkbox" ng-checked="todo.checked" ng-click="undone($index,doneTodos)"&gt;删除</a>
        </dd>
    </dl>
</div>
<script src="./libs/angular.min.js"&gt;</script>
<script>
    // 定义一个模块
    var App = angular.module('App',[]);
    // 定义一个控制器
    App.controller('TodoListController',['$scope',function($scope) {

        // 待办事项
        $scope.todos = [];
        // 已完成事项
        $scope.doneTodos = [];
        // $scope.todo = '';
        // 回车时<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>ng-submit,往待办事项中<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>数据
        $scope.addItem = function () {
            // 向数组中<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>数据
            $scope.todos.push({text:$scope.todo,checked: false});
            // 清空输入框
            $scope.todo = '';
        }
        // 勾选时完成
        $scope.done = function (index,ev) {
            // console.log(index);
            // console.log($scope.todos);
            // 从待办事项中<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
            var tmp = $scope.todos.splice(index,1);
            tmp[0].checked = !tmp[0].checked;
            // 将<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>的事项<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到已完成里
            $scope.doneTodos = $scope.doneTodos.concat(tmp);
            ev.preventDefault();
        }
        // 取消已完成
        $scope.undone = function (index,ev) {
            // 从已完成数据中<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>
            var tmp = $scope.doneTodos.splice(index,1);
            tmp[0].checked = !tmp[0].checked;
            // 将事项<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>到待办事项中
            $scope.todos = $scope.todos.concat(tmp);
            // ev.preventDefault();
        }
        // <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>事项,传递当前索引和完整数据
        $scope.delete = function (index,todos) {
            // $scope.doneTodos.splice(index,1);
            // console.log(todos);
            // <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>索引值对应的事项
            todos.splice(index,1);
        }
    }])
    // var arr = [0,1,2,3,4];
    // arr.splice(2,1)
</script>

以上这篇AngularJS动态添加数据并删除的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/33529.html

猜你在找的JavaScript相关文章