Nur ein Doppelklick kann ein Objekt editierbar machen

Question

Ich möchte eine Liste von Elementen machen, Doppelklick auf ein Element macht es editierbar. Ich folgte this answer und schrieb den folgenden Code (JSBin).

Am Anfang sind alle Elemente schreibgeschützt; Doppelklicken auf ein Element macht es editierbar. Nachdem ich es bearbeitet habe, merke ich, dass es NICHT mehr schreibgeschützt ist. Ich denke, die richtige Logik wäre once we have modified one item, it becomes read-only once again, only double-clicking could change it.

Kann jemand den Code ändern, um dies zu erreichen?

var app = angular.module('app', []); 
 
    app.controller('Ctrl', ['$scope', function($scope) { 
 
    $scope.items = [{ 
 
    name: "item #1" 
 
    }, { 
 
    name: "item #2" 
 
    }, { 
 
    name: "item #3" 
 
    }]; 
 
    $scope.eEditable = -1; 
 
    }])

input { 
 
    font-size: 20px; 
 
    border: none; 
 
    background-color: transparent; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
    <div ng-app="app" ng-controller="Ctrl"> 
 
    <table> 
 
    <tr ng-repeat="item in items"> 
 
    <td> 
 
    <input type="text" value="{{item.name}} {{$index}}" ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" /> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
    {{count}} 
 
    </div>

Answer 1

hinzufügen ng-blur='eEditable = -1' zum input:

<input type="text" value="{{item.name}} {{$index}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" /> 

JSBin