如何使用 Angular Js 添加和编辑和删除表格数据？答案

【问题标题】：How to Add and Edit and Delete table data using Angular Js?如何使用 Angular Js 添加和编辑和删除表格数据？
【发布时间】：2018-07-26 23:52:21
【问题描述】：

我想添加和编辑和删除表格列表数据。

据我所知，我能够编写以下代码来添加新用户，但我不知道如何执行编辑和删除操作。

我在谷歌搜索了很多，但没有得到正确的解决方案。

有人可以帮帮我吗？

index.html:-

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <body ng-app="myApp" ng-controller="userCtrl">

    <div class="w3-container">

    <h3>Users</h3>

    <table class="w3-table w3-bordered w3-striped">
      <tr>
        <th>Edit</th>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
      <tr ng-repeat="user in users">
        <td>{{ user.fName }}</td>
        <td>{{ user.lName }}</td>
         <td>
          <button class="w3-btn w3-ripple" ng-click="editUser()">Edit</button>
        </td>
        <td>
          <button class="w3-btn w3-ripple" ng-click="deleteUser()">Delete</button>
        </td>
      </tr>
    </table>
    <br></br>

    <h3>Create New User</h3>

    <form>
        <label>First Name:</label>
        <input class="w3-input w3-border" type="text" ng-model="fName" placeholder="First Name">
      <br>
        <label>Last Name:</label>
        <input class="w3-input w3-border" type="text" ng-model="lName" placeholder="Last Name">
        <br></br>

    <button class="w3-btn w3-green w3-ripple" ng-click="addUser()">Save Changes</button>

    </form>

    </div>

    <script src= "myUsers.js"></script>

    </body>

</html>

我的用户：-

angular.module('myApp', []).controller('userCtrl', function($scope) {

    $scope.users = [
    {id:1, fName:'Hege', lName:"Pege" },
    {id:2, fName:'Kim',  lName:"Pim" },
    {id:3, fName:'Sal',  lName:"Smith" },
    {id:4, fName:'Jack', lName:"Jones" },
    {id:5, fName:'John', lName:"Doe" },
    {id:6, fName:'Peter',lName:"Pan" }
    ];

    $scope.addUser=function(){
        $scope.users.push({
            'fName':users.fName,
            'lName':users.lName,
        });
       }

    $scope.editUser=function(){

      }

    $scope.deleteUser=function(){

      }

});

【问题讨论】：

我不知道你在哪里搜索。 Add, Remove & Update specific data In JSON in AngularJS 的可能重复项
请查看codepen.io/santoshshinde2012/pen/PQOOOM

标签： angularjs

【解决方案1】：

请查看here的教程。

供您参考，请使用以下代码并将代码笔检查到here。

在模板中

     <tr ng-repeat="user in users">
      <td>
       <span ng-if="!user.editFlag">{{ user.fName }}</span>
       <input ng-if="user.editFlag" ng-model="user.fName"/>
      </td>
      <td>
      <span ng-if="!user.editFlag">{{ user.fName }}</span>
      <input ng-if="user.editFlag" ng-model="user.lName"/>
      </td>
      <td>
          <button class="w3-btn w3-ripple" ng-click="editUser($index)"><span ng-if="!user.editFlag">Edit<span><span ng-if="!user.editFlag">Save</span></button>
      </td>
      <td>
          <button class="w3-btn w3-ripple" ng-click="deleteUser($index)">Delete</button>
      </td>
    </tr>

在你的控制器中

    // edit data
    $scope.editUser = function (index) {

        if($scope.users.length){
          // its checking with your edit flag to save or edit
          $scope.users[index].editFlag = !$scope.users[index].editFlag;

        }

    };
    // Delete data
    $scope.deleteUser = function (index) {

        // Remove from main records (using index)
        if($scope.users.length){
          $scope.users.splice(index, 1);
        }
    };

请将此示例发送至here。

希望对你有帮助！！

【讨论】：

不适合我。它需要OP。 OP 需要一个标志变量来显示和隐藏表格内的可编辑字段。
你将在你的用户对象iteslf中使用标志
正是这个：stackoverflow.com/questions/34839697/…
是的，也许你会检查这个javasavvy.com/angularjs-table-form-edit-tutorial
让我们continue this discussion in chat。

【解决方案2】：

这些更改将使 addUser 功能正常工作

   $scope.addUser=function(index){
      if(index){
      $scope.users[index].fName=$scope.fName;
      $scope.users[index].lName=$scope.lName;
    }
    else{
    $scope.users.push({
        'fName':$scope.fName,
        'lName':$scope.lName,
    });
   }
   $scope.editMode=false;
    $scope.fName='';
    $scope.lName='';     
}

    $scope.editUser=function(index){
    $scope.editMode=true;
    $scope.editIndex=index;
    $scope.fName=$scope.users[index].fName;
    $scope.lName=$scope.users[index].lName;
}

$scope.deleteUser=function(index){
   $scope.users.splice(index,1)
}

这是上述问题的工作版本随着html和js代码的变化

https://embed.plnkr.co/ecKSDwW2hfU9t7cj4rZP/

【讨论】：

Html 文件确实有一些变化。你可以通过 plunker 链接
Bu 重复记录不应允许@shilpidev
我没明白你是如何检查重复记录的？我的意思是它是“id”还是“fName”？
使用我想检查的 id
第1步：prnt.sc/ifg0h5第2步：prnt.sc/ifg085第3步：prnt.sc/ifg0yd编辑似乎工作正常。不要把它卡在哪里