更改只有一個跨度輸入ng內部重複

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