CODEWITHSUNDEEP
javascriptangularjs
javascript novice
javascript novice

Reputation: 777

AngularJS ToDO List Edit error

I have an issue in the Edit Part of a Simple Angular Todo App That I created. My App Adds, deletes and Edits an Entry. I have used AngularJS and BootStrap for this. The prolem is, when I press edit button, all the entries, get into edit mode instead of the entry that I want to edit. I am not sure why the in place edit is not working as expected.

My HTML:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="todo.js"></script>
</head>
<body ng-controller="myCtrl">

<div class="container">
    <h1>My TODO List</h1>
    <table class="table">
        <thead>
        <tr>
            <td><input class="form-control" ng-model="todo"></td>
            <td><button class="btn btn-primary" ng-click="addItem()">Add</button></td>
        </tr>
        <tr>
            <th>Serial No</th>
            <th>Tasks to be Completed</th>
            <th>Action</th>
            <th>&nbsp</th>
        </tr>
        </thead>
        <tbody>

        <tr ng-repeat="todo in todolist">
            <td >{{$index+1}}</td>
            <td ng-hide="todo.selected == true">{{todo.task}}</td>
            <td><input class="form-control" ng-show="todo.selected == true" ng-model="todo.task">
                <button class="btn btn-success" ng-show="todo.selected == true" ng-click="save($index)">Save</button>
                <button class="btn btn-danger" ng-show="todo.selected == true" ng-click="cancel($index)">Cancel</button>
                <button class="btn btn-warning" ng-click="edit($index)" ng-hide="todo.selected == true">Edit</button>
                <button class="btn btn-danger" ng-click="deleteItem($index)" ng-hide="todo.selected == true">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>

My JavaScript Code:

angular.module("myApp",[])
    .controller("myCtrl", function($scope){
        $scope.todolist = [];

        $scope.addItem = function(){
            console.log($scope.todo);
            if($scope.todo === undefined){
                return false ;
            }
            else{

                $scope.todoObj = {};
                $scope.todoObj["task"] = $scope.todo;
                $scope.todoObj["selected"] = false;
                $scope.todolist.push($scope.todoObj);
                $scope.todo = "";
                console.log($scope.todolist);
            }

        }

        $scope.deleteItem = function($index){
            var index =$index;
            $scope.todolist.splice(index,1);
        }


        $scope.edit = function($index){
            for(var i=0; i< $scope.todolist.length; i++)
                if($index == i){

                    $scope.todolist[i].selected = true;
                }
        }


        $scope.save = function($index){
            console.log("saving contact");
            console.log($scope.todolist.length)
            for(var i=0; i< $scope.todolist.length; i++){
                if($index == i){
                    console.log($scope.todolist[$index]);

                    $scope.todolist[i] = `enter code here`angular.copy($scope.todolist[$index]);
                    // $scope.todolist[i] = $scope.todolist[$index];
                    $scope.todolist[i].selected = false;
                    console.log("todo after save",$scope.todolist);
                }
            }

        }


        $scope.cancel = function($index) {
                    for(var i=0; i< $scope.todolist.length; i++){
                    if ($scope.todolist[$index].selected !== false) {
                        $scope.todolist[$index].selected = `enter code here`$scope.todolist[i];
                        $scope.todolist[$index].selected = false;
                }
            }

        };
    })

Upvotes: 1

Views: 1250

Answers (1)

Seano666
Seano666

Reputation: 2238

When you are setting this

$scope.editing = $scope.todolist.indexOf(item);

All of your ng-repeats are relying on this to hide/show themselves.

ng-show="editing"

Upvotes: 1

Related Questions