仅更改一个跨度即可在ng-repeat中输入

Question

I have a simple app, that shows tasks. I would like to double click on a task to edit it, so I want it change from <span> to <input type="text" /> . Here's my code:

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

But when I double click on a task, every <span> changes to <input type="text" /> :

Here's that directive that generates the HTML code:

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

How can I change only one <span> to <input type="text" /> ?

Answer 1

Try putting the editable flag on the task, and not the scope.

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