ng-repeat内に入力する1つのスパンのみを変更してください

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> 

しかし、私は、仕事上の<input type="text" />へのすべての<span>変更ダブルクリックしたときに：

をここに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; 
}; 
...