jeudi 14 septembre 2017

Uncheck checkbox after removal from array

I'm having a weird problem with my checkboxes. It might have a simple solution because I'm new on Angular but I've tried to fix it in so many ways and I had no success.

I'm trying to do a TO DO list Google-wise. The problem is I have a list of itens with checkboxes and when I check one of them I want to delete the item from the array but when I do that the next item from the list is being checked.

There is the code I wrote:

var app = angular.module('todoApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [];
    $scope.doneList = [];

    $scope.todoAdd = function() {
        $scope.todoList.push({text:$scope.todoInput, done:false});
        $scope.todoInput = "";
    };

    $scope.markAsDone = function() {
        var task = $scope.todoList[this.$index];
        task.done = true;
        $scope.doneList.push(task);
        $scope.todoList.splice(this.$index, 1);
    };

    $scope.markAsTodo = function () {
        var task = $scope.doneList[this.$index];
        task.done = false;
        $scope.todoList.push(task);
        $scope.doneList.splice(this.$index, 1);
    };
    
});
<ul class="list-group" ng-repeat="task in todoList track by $index">
  <div class="input-group">
    <div class="input-group-addon">
      <input type="checkbox" aria-label="Done" ng-checked="checked" ng-click="markAsDone()">
    </div>
    <input type="text" class="form-control" value="">
    <button class="btn btn-danger btn-sm">Delete</button>
    
  </div>
</ul>
<form class="form-group" ng-submit="todoAdd()">
  <div class="input-group">
    <input class="form-control" type="text" ng-model="todoInput" placeholder="New Task" autofocus>
    <button class="btn btn-primary btn-sm" type="submit">Add</button>
  </div>
</form>

Sorry, I couldn't make the snippet work but the code is there. Thank you!




Aucun commentaire:

Enregistrer un commentaire