I'm looking to iterate through a checklist and remove completed items from the array. Here's my current code:
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);
}
This is my HTML:
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6878881938a8794c88c95a6d7c8d2c8d6cb9485c8d4">[email protected]</a>" 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>
I'm fairly new to scripting, so all I need is something to check if the checkbox is true and then remove it. You can view the code in action on this Plunkr link: Plunkr Link