javascript - 双击使表格单元格可编辑-Angularjs

Question

这个问题已经被问过很多次了，但我觉得这里的场景有点不同，我正在尝试关注accepted answer in this question .与这里不同，我的数据是从 api 获取的，我无法添加这样的属性 item.editing 到数据。我尝试将对象/事件传递给函数，但我想这不是解决它的 Angular 方法。

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
    }, {
        name: "item #2",
    }, {
        name: "item #3",
    }];
       
    $scope.editItem = function (obj) {
        obj.target.setAttribute("ng-hide", true);
        // doing something like? but this wouldn't be angular way
		//obj.target.next().setAttribute('ng-show', false);
    }

    $scope.doneEditing = function (item) {
		obj.target.setAttribute("ng-show", false);
        //obj.target.previous().setAttribute("ng-hide", false);
    };
}

.container {
    margin-top:10px;
    font-family:arial;
}
input:focus {
    //change more attributes, if you want.
}
input {
    border:none;
    background-color:transparent;
}
.container header {
    padding-bottom:20px;
    border-bottom:1px solid black;
}
ul, input, .container {
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl" class="container">Double-click on the items below to edit:
        <table>
        <tr ng-repeat="item in items">
            <td>
            <!-- How to do this Angular way? Instead of giving ng-hide as false statically, give some parameter to it, which can be modified from functions editItem, and doneEditing -->    
                <span ng-hide="false" ng-dblclick="editItem($event)">{{item.name}}</span>
                <input ng-show="false" ng-model="item.name" ng-blur="doneEditing($event)" autofocus />
            </td>
        </tr>
        </table>
</div>

on fiddle

Answer 1

试试这个 Demo

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
    }, {
        name: "item #2",
    }, {
        name: "item #3",
    }];

    $scope.editItem = function (obj) {
        console.log(obj.target);
        obj.target.setAttribute("contenteditable", true);
        obj.target.focus();
        // doing something like? but this wouldn't be angular way
        //obj.target.next().setAttribute('ng-show', false);
    }
}