Javascript AngularJS待办事项列表编辑错误_Javascript_Angularjs

Javascript AngularJS待办事项列表编辑错误

javascript angularjs

Javascript AngularJS待办事项列表编辑错误,javascript,angularjs,Javascript,Angularjs,我在我创建的一个简单的角度Todo应用程序的编辑部分有一个问题。我的应用程序添加、删除和编辑条目。我使用了AngularJS和BootStrap。问题是，当我按下编辑按钮时，所有条目都进入编辑模式，而不是我想要编辑的条目。我不知道为什么就地编辑没有按预期工作我的HTML： <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8">

我在我创建的一个简单的角度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>


我的待办事项清单
添加
序列号
待完成的任务
行动
 
{{$index+1}}
{{todo.task}
拯救
取消
编辑
删除

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

        };
    })

angular.module（“myApp”，[]）
.controller（“myCtrl”，函数（$scope）{
$scope.todolist=[]；
$scope.addItem=函数（）{
log（$scope.todo）；
如果（$scope.todo==未定义）{
返回false；
}
否则{
$scope.todoObj={}；
$scope.todoObj[“任务”]=$scope.todo；
$scope.todoObj[“selected”]=false；
$scope.todolist.push（$scope.todoObj）；
$scope.todo=“”；
log（$scope.todolist）；
}
}
$scope.deleteItem=函数（$index）{
var指数=$指数；
$scope.todolist.splice（索引1）；
}
$scope.edit=函数（$index）{
对于（变量i=0；i<$scope.todolist.length；i++）
如果（$index==i）{
$scope.todolist[i]。selected=true；
}
}
$scope.save=函数（$index）{
console.log（“保存联系人”）；
console.log（$scope.todolist.length）
对于（变量i=0；i<$scope.todolist.length；i++）{
如果（$index==i）{
log（$scope.todolist[$index]）；
$scope.todolist[i]=`在此处输入代码`angular.copy（$scope.todolist[$index]）；
//$scope.todolist[i]=$scope.todolist[$index]；
$scope.todolist[i]。selected=false；
log（“保存后的todo”，$scope.todolist）；
}
}
}
$scope.cancel=函数（$index）{
对于（变量i=0；i<$scope.todolist.length；i++）{
如果（$scope.todolist[$index]。选中！==false）{
$scope.todolist[$index].selected=`在此处输入代码`$scope.todolist[i]；
$scope.todolist[$index].selected=false；
}
}
};
})

当您设置此选项时

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

所有ng重复都依赖于此来隐藏/显示自己

ng-show="editing"

那么，如何确保ng show只针对需要编辑的项目？这有点复杂。我要做的是有一个“可编辑”布尔值数组，让重复元素的ID为0、1、2等等。然后用ID调用edit，它会将该ID的特定“可编辑”布尔值设置为true。您还需要一个函数循环并将所有可编辑项重置为false。谢谢！我明白了。现在我有另一个问题。编辑后，我有两个按钮。取消并保存。保存工作很好。但是当我取消时，如果我做了任何更改，这些更改都是可见的：（我算出了。谢谢！！