JavaScript中使用splice删除数组的问题

最新推荐文章于 2024-04-23 00:00:00 发布

Naparte

最新推荐文章于 2024-04-23 00:00:00 发布

阅读量378

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_28949081/article/details/83796691

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="../angular-1.6.6/angular.js"></script>
    <link rel="stylesheet" href="./toDoList.css">
    <script>
        (function(angular) {
            var app = angular.module('myApp', []);
            app.controller('MyController', ['$scope', function($scope) {
                $scope.dataList = [];
                $scope.finished = null;
                $scope.add = function() {
                    $scope.dataList.push({
                        a: $scope.data,
                        b: false
                    });
                    console.log($scope.dataList);
                };
                $scope.delet = function($event) {
                    $scope.dataList.splice(this.$index, 1);
                }
                $scope.empty = function() {
                    $scope.dataList = [];
                }
                $scope.checkedbox = function($event) {
                    $scope.dataList[this.$index].b = !$scope.dataList[this.$index].b;
                    // if (event.target.checked) {
                    // console.log(this.$index);
                    // // $scope.selected = finished;
                    // }
                }
                $scope.del_selected = function() {
                    //这里用splice删除所选中的元素，但是如果从前往后删除导致数组长度发生变化，每次删除一个之后循环就终止了。
                    //但是如果从后往前删的话这个问题就不存在
                    for (var i = $scope.dataList.length - 1; i >= 0; i--) {
                        if ($scope.dataList[i].b) {
                            $scope.dataList.splice(i, 1);
                        }
                    }
                }
            }]);
        })(angular);
    </script>

</head>
<body ng-app="myApp" ng-controller="MyController">
    <h1>To DO List </h1>
    <div class="container self-container">
        <input ng-model="data" type="text" class="form-control self-inp" id="exampleInputEmail2" placeholder="输入信息">
        <button ng-click="add()" class="btn btn-primary self-add">添加</button>
        <div class="self-list">
            <div class="checkbox">
                <div ng-repeat="item in dataList track by $index" class="self-item-list">
                    <input type="checkbox" value="" ng-checked="item.b" ng-click="checkedbox()" ng-model="selected">
                    <span ng-class="{true: 'finished'}[item.b]">{{item.a}}</span>
                    <button class="btn btn-primary self-xx" ng-click="delet()">&times;</button>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <button class="btn btn-primary self-btn-del" ng-click="del_selected()">删除所选项</button>
            <button class="btn btn-primary self-btn-empty" ng-click="empty()">清空</button>

        </div>
    </div>
</body>
</html>

Naparte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中使用splice删除数组的问题

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫