当复选框为True时,删除以角度构建的数组中的对象

时间:2015-05-18 14:20:21

标签: javascript arrays angularjs

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

 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 Link

2 个答案:

答案 0 :(得分:1)

您在removeCompleted方法中想要的是

&#13;
&#13;
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)
})
&#13;
&#13;
&#13;

将遍历您的列表项,如果完成为true,则它将从数组中删除该项

答案 1 :(得分:0)

例如:

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

参见示例HERE