雙擊可使表格單元格可編輯 - Angularjs

Question

這個問題已被多次詢問，但我認為這里的情況有點不同，我試圖在這個問題中遵循接受的答案 。 與此不同的是，我的數據是從api中獲取的，我無法將屬性作為item.editing添加到數據中。 我嘗試將對象/事件傳遞給函數，但我認為這不是解決它的角度方式。

 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> 

小提琴

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);
    }
}