JSFiddle - React, Tailwind, and code Playground

by justbn

HTML

<body ng-app="app">
        
    <div ng-controller="ToDoController">
        <label for="name">Your Name:</label><input ng-model="name"/>
        
        <div>{{name}}'s ToDo List</div>
        
        <ul ng-repeat="todo in todos">
            <li class="done-{{todo.completed}}">
                <input type="checkbox" ng-model="todo.completed"/>
                {{todo.item}}
            </li>
        </ul>

        <input type="submit" value="Archive" ng-click="archiveToDods()">
    </div>
    
    
</body>

CSS

.done-true {
    text-decoration: line-through;
    color: #333;
}

JavaScript

var app = angular.module("app", []);

app.controller("ToDoController", function($scope) {
    $scope.name = '';
    
    $scope.todos = [
        {
            item: 'Clean Room',
            completed: true
        },
        {
            item: 'Clean Kitchen',
            completed: false
        }
    ];
    
    $scope.archiveToDods = function() {
        console.log('Archive!!');
        
        var counter = 0;
        angular.forEach($scope.todos, function(item,key) {
            console.log('Key=' + key);
            console.log('Item=');
            console.log(item);
            if(item.completed === true) {
                $scope.todos.splice(key,1);
            }
        });
    }
});