Angularjs中的可编辑列表

<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <span ng-hide="user.editing">{{ user.name }}</span>
        <input ng-show="user.editing" ng-model="user.name">
      </td>
      <td>
        <span ng-hide="user.editing">{{ user.email }}</span>
        <input ng-show="user.editing" ng-model="user.email">
      </td>
      <td>
        <button ng-hide="user.editing" ng-click="editUser(user)">Edit</button>
        <button ng-show="user.editing" ng-click="saveUser(user)">Save</button>
        <button ng-show="user.editing" ng-click="cancelEdit(user)">Cancel</button>
        <button ng-click="deleteUser(user)">Delete</button>
      </td>
    </tr>
  </table>
</div>

<script>
  var app = angular.module('myApp', []);

  app.controller('myCtrl', function($scope) {
    $scope.users = [
      { name: 'John Doe', email: 'john@example.com', editing: false },
      { name: 'Jane Smith', email: 'jane@example.com', editing: false },
      { name: 'Bob Johnson', email: 'bob@example.com', editing: false }
    ];

    $scope.editUser = function(user) {
      user.editing = true;
    };

    $scope.saveUser = function(user) {
      user.editing = false;
    };

    $scope.cancelEdit = function(user) {
      user.editing = false;
    };

    $scope.deleteUser = function(user) {
      var index = $scope.users.indexOf(user);
      $scope.users.splice(index, 1);
    };
  });
</script>