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>

myUsers： -

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(){

      }

});

Answer 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。

希望这会对你有所帮助!!

Answer 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/

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

index.html的： -

myUsers： -

2 个答案: