두 번 클릭만으로 항목을 편집 할 수 있습니다.

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

가 input에 ng-blur='eEditable = -1'을 추가

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

JSBin