Question

我在我创建的简单角度Todo应用程序的编辑部分中遇到了问题。我的应用程序添加，删除和编辑条目。我已经使用了AngularJS和BootStrap。当我按下编辑按钮时，所有条目进入编辑模式而不是我想要编辑的条目。我不确定为什么现场编辑没有按预期工作。

我的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>

我的JavaScript代码：

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;
                }
            }

        };
    })

Answer 1

当您设置此

时

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

你所有的ng-repeats都依赖它来隐藏/显示自己。

ng-show="editing"

AngularJS ToDO列表编辑错误

1 个答案: