javascript - Angular 表行在编辑后消失

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>

在你的 Controller 中

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

Working pulker