編輯它后角表消失

Question

我在表中使用ng-repeat來動態生成內容。我已經給出了一個選項編輯和刪除表的內容。

但是我面臨的問題是，一旦我編輯並保存一行，它就會消失。我嘗試使用jQuery手動爲表格行添加值，但仍然無效。我的代碼是Codepen Link。

這裏是我的html頁面：

<div class="container" ng-app="trial"> 
    <table class="table table-hover" ng-controller="newTrial"> 
    <tr> 
     <th class="col-md-3">Name</th> 
     <th class="col-md-2">Age</th> 
     <th class="col-md-5">Description</th> 
     <th class="col-md-2">Actions</th> 
    </tr> 
    <tr ng-repeat="entry in entryList"> 
     <td ng-hide="edit[$index]">{{entry.name}}</td> 
     <td ng-hide="edit[$index]">{{entry.age}}</td> 
     <td ng-hide="edit[$index]">{{entry.desc}}</td> 
     <td ng-hide="edit[$index]"> 
     <button class="btn btn-primary" ng-click="editEntry($index)">Edit</button> 
     <button class="btn btn-danger" ng-click="deleteEntry($index)">Delete</button> 
     </td> 
     <td ng-show="edit[$index]"> 
     <input type="text" class="form-control" ng-value="entry.name" id="nameEdit$index" /> 
     </td> 
     <td ng-show="edit[$index]"> 
     <input type="text" class="form-control" ng-value="entry.age" id="ageEdit$index" /> 
     </td> 
     <td ng-show="edit[$index]"> 
     <input type="text" class="form-control" ng-value="entry.desc" id="descEdit$index" /> 
     </td> 
     <td ng-show="edit[$index]"> 
     <button class="btn btn-success" ng-click="saveEntry($index)">Save</button> 
     <button class="btn btn-warning" ng-click="cancelEntry($index)">Cancel</button> 
     </td> 
    </tr> 

    </table> 
</div> 

這裏是我的JavaScript文件：

var app = angular.module('trial', []); 

app.controller('newTrial', ["$scope", function($scope){ 
    $scope.edit = [false, false, false]; 
    $scope.entryList = [ 
    { 
     name: "ABC", 
     age: 30, 
     desc: "Something he does" 
    }, 
    { 
     name: "DEF", 
     age: 35, 
     desc: "Something he does not do" 
    }, 
    { 
     name: "GHI", 
     age: 32, 
     desc: "Something he is good at" 
    } 
    ]; 
    $scope.editEntry = (i) => { 
    $scope.edit[i] = true; 
    }; 
    $scope.deleteEntry = (i) => { 
    $scope.edit.splice(i , 1); 
    $scope.entryList.splice(i , 1); 
    }; 
    $scope.saveEntry = (i) => { 
    $scope.entryList[i].name = angular.element("nameEdit"+i).val(); 
    $scope.entryList[i].age = angular.element("ageEdit"+i).val(); 
    $scope.entryList[i].desc = angular.element("descEdit"+i).val(); 
    $scope.edit[i] = false; 
    }; 
    $scope.cancelEntry = (i) => { 
    $scope.edit[i] = false; 
    }; 
}]); 

Answer 1

不知道爲什麼你寫下來表現出很大的代碼，你可以這樣做只是爲後續： -

<tr ng-repeat="entry in entryList" > 
     <td ng-if="!entry.isEditable">{{entry.name}}</td> 
     <td ng-if="!entry.isEditable">{{entry.age}}</td> 
     <td ng-if="!entry.isEditable">{{entry.desc}}</td> 
     <td ng-if="!entry.isEditable"> 
     <button class="btn btn-primary" ng-click="entry.isEditable = !entry.isEditable">Edit</button> 
     <button class="btn btn-danger" ng-click="deleteEntry(entry)">Delete</button> 
     </td> 
     <td ng-if="entry.isEditable"> 
     <input type="text" class="form-control" ng-model="entry.name" /> 
     </td> 
     <td ng-if="entry.isEditable"> 
     <input type="text" class="form-control" ng-model="entry.age" /> 
     </td> 
     <td ng-if="entry.isEditable"> 
     <input type="text" class="form-control" ng-model="entry.desc" /> 
     </td> 
     <td ng-if="entry.isEditable"> 
     <button class="btn btn-success" ng-click="saveEntry(entry)">Save</button> 
     <button class="btn btn-warning" ng-click="entry.isEditable = !entry.isEditable">Cancel</button> 
     </td> 

    </tr> 

在您控制器

$scope.deleteEntry = (i) => { 
    $scope.entryList.splice(i , 1); 
    }; 
    $scope.saveEntry = (entry) => { 
    //do somthing here 
entry.isEditable = !entry.isEditable 
    }; 

Working pulker