只有雙擊可以使項目可編輯

Question

我想列出項目，雙擊一個項目可以編輯項目。我跟着this answer寫了下面的代碼（JSBin）。

在開始時，所有項目都是隻讀的;雙擊一個項目確實可以編輯它。但是，在編輯它之後，我意識到它不再是隻讀的。我認爲正確的邏輯將是once we have modified one item, it becomes read-only once again, only double-clicking could change it。

有誰知道如何修改代碼來實現這一目標？

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

添加ng-blur='eEditable = -1'到input：

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

JSBin