javascript - 仅更改一个跨度以在 ng-repeat 内输入

Question

我有一个简单的应用程序，显示任务。我想双击一个任务来编辑它，所以我希望它从 <span> 更改至<input type="text" /> 。这是我的代码:

<li ng-repeat="task in tasks">
    <input type="checkbox" ng-checked="task.done" ng-click="taskDone(task.id, !task.done)"/>
    <span ng-dblclick="editTask()" ng-if="!editable">{{::task.task}}</span>
    <input type="text" ng-if="editable" value="{{task.task}}" />
</li>

但是当我双击任务时，每个 <span>更改为<input type="text" /> :

这是生成 HTML 代码的指令:

export const tasksList = function() {
    return {
        restrict: 'E',
        scope: {
            tasks: "="
        },
        templateUrl: '../dist/views/tasksList.html',
        link: function(scope, element, attrs) {
            scope.$watchCollection('tasks', function(tasks) {
                scope.updateTasks();
            });
        },
        controller: function($scope) {
            const self = this;
            $scope.editable = false;
            $scope.editTask = function() {
                $scope.editable = true;
            };
            $scope.updateTasks = function() {
                self.tasks = $scope.tasks;
            };
            $scope.taskDone = function(id, taskDone) {
                $scope.tasks[id].done = taskDone;
            };
        },
        controllerAs: "$ctrl"
    };
};

如何只更改一个 <span>至<input type="text" /> ？

Answer 1

尝试将 editable 标志放在任务上，而不是范围上。

<li ng-repeat="task in tasks">
    <input type="checkbox" ng-checked="task.done" ng-click="taskDone(task.id, !task.done)"/>
    <span ng-dblclick="editTask(task)" ng-if="!task.editable">{{::task.task}}</span>
    <input type="text" ng-if="task.editable" value="{{task.task}}" />
</li>

...
$scope.editTask = function(task) {
     task.editable = true;
 };
...