当复选框为True时，删除angular中构建的数组中的对象

Deleting objects in an array built in angular, when a check box is True

本文关键字：构建 数组 对象 angular 删除 复选框 True      更新时间：2023-09-26

我需要循环检查列表并删除数组中已完成的项目，我目前拥有的代码是:

 app.controller("MainController", ["$scope",function($scope) {
$scope.list = [{
    text: 'Figure your stuff out',
    done: false
  }, {
    text: 'Count to seven',
    done: false
  }

];

$scope.addTask = function() {
  $scope.list.push({
    text: $scope.fromListText,
    done: false
  });
  $scope.fromListText = '';
};
$scope.removeCompleted = function(index) {
  $scope.list.splice(index, 1);
}
控制器的

，这是我的Html:

    <html>
<head>
  <script data-require="angular.js@1.4.0-rc.2" data-semver="1.4.0-rc.2"        src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.0-rc.2" src="https://code.angularjs.org/1.4.0-rc.2/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="toDoList">
  <div class="header">
    <div class="container">
      <h1>Your list brah</h1>
    </div>
  </div>
  <div class="myList" ng-controller="MainController">
    <div class="container">
      <div ng-repeat="task in list">
        <form class = "myTask">
          Task:
          <br>
          <input type="checkbox" ng-model = "task.done">{{ task.text  }} 
        </form>

      </div>
      <form>
        <input placeHolder="Things I dont want to do..." type="text" ng-  model="fromListText" ng-model-instant/>
        <button class = "myButton" ng-click = addTask() >Add task</button>
      </form>
      <button class = "myButton" ng-click = "removeCompleted()" >Clear Completed Tasks</button>
    </div>
  </div>

</body>
</html>

我对脚本有点陌生，所以我想做的就是有一些检查，看看复选框是否为真，如果是，然后删除它这里是plunkr链接，如果你想看到在行动中的代码。Plunkr链接

你想要的removeCompleted方法是

var $scope = {}
$scope.list = [{
    text: 'Figure your stuff out',
    done: true
  }, {
    text: 'Count to seven',
    done: false
  }, {
    text: 'Count to eight',
    done: true
  }, {
    text: 'Count to nine',
    done: false
  }
]
for(var i = 0; i < $scope.list.length; i++) {
    	if($scope.list[i].done)  {
    		$scope.list.splice(i, 1)
    	 	i--
    	}
    }
$scope.list.forEach(function(item) {
  alert(item.text + ', ' + item.done)
})

循环遍历列表项如果done为true则将该项从数组中移除

例如:

$scope.deleteTasks = function () {
    for (var i = $scope.tasks.length - 1; i >= 0 ; i--) {
        if ($scope.tasks[i].Completed) {
            $scope.tasks.splice(i, 1);
        }
    }
}

参见此处的示例

相关文章：