http://plnkr.co/edit/3UMwSK6H5VL0pZujL7Qh?p=preview
单击编辑，然后取消。文本框不会消失。再次点击取消，它们就会消失。请告诉我为什么会这样。我对此失去了理智。
谢谢你的进步。 ：）
以下是代码：
function SmartTableController($scope) {
$scope.sortFunc = function (keyname) {
$scope.sortType = keyname;
$scope.reverse = !$scope.reverse;
}
$scope.editing = false;
$scope.newField = {};
$scope.editUsersTableFunc = function (user) {
user.editing = true;
$scope.newField = angular.copy(user);
$scope.editing = $scope.usersTable.indexOf(user);
}
$scope.saveField = function (user) {
user.editing = false;
$scope.newField = angular.copy(user);
$scope.usersTable[$scope.editing] = $scope.newField;
}
$scope.resetFunc = function (user) {
//$scope.newField = angular.copy(user);
user.editing = false;
$scope.usersTable[$scope.editing] = $scope.newField;
}
var OnEventChangeFunc = function () {
$scope.lastItem = $scope.currentPage * $scope.itemsDisplayedPerPage;
$scope.firstItem = $scope.lastItem - $scope.itemsDisplayedPerPage + 1;
$scope.lastItem = $scope.lastItem > $scope.totalRecords ? $scope.totalRecords : $scope.lastItem;
}
$scope.itemsDisplayedPerPage = '5';
$scope.currentPage = 1;
$scope.$watch('itemsDisplayedPerPage', OnEventChangeFunc);
$scope.$watch('currentPage', OnEventChangeFunc);
$scope.usersTable =[{ firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US" },
{ firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US" },
{ firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US" }];
$scope.totalRecords = $scope.usersTable.length;
}
SmartTableController.$inject = ['$scope'];
angular.module('smartTable', ['angularUtils.directives.dirPagination']);
angular.module('smartTable').controller('SmartTableController', SmartTableController);<!DOCTYPE html>
<html ng-app="smartTable">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.js"></script>
<script src="dirPagination.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="SmartTableController">
<div class="form-inline">
<label>Search : </label>
<input type="search" ng-model="search" class="form-control" placeholder="Enter text to search" />
</div>
<div st-table="usersTable">
<table class="table table-striped">
<thead>
<tr>
<th>Index</th>
<!--<th > First Name</th>-->
<th>
<a href="#" ng-click="sortFunc('firstName')">
First Name
</a>
</th>
<!--<th ng-click="sortType='lastName'"> Last Name</th>-->
<th>
<a href="#" ng-click="sortFunc('lastName')">
Last Name
</a>
</th>
<!--<th ng-click="sortType='emailId'"> Email Id</th>-->
<th>
<a href="#" ng-click="sortFunc('emailId')">
Email Id
</a>
</th>
<!--<th ng-click="sortType='country'"> Country</th>-->
<th>
<a href="#" ng-click="sortFunc('country')">
Country
</a>
</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in usersTable | orderBy : sortType : reverse| filter : search | itemsPerPage : itemsDisplayedPerPage" current-page="currentPage">
<td>
{{$index + firstItem}}</td>
<td>
<input type="text" ng-if="user.editing" ng-model="user.firstName"/>
<span ng-if="!user.editing">{{user.firstName}}</span></td>
<td>
<input type="text" ng-if="user.editing" ng-model="user.lastName"/>
<span ng-if="!user.editing">{{user.lastName}}</span></td>
<td>
<input type="text" ng-if="user.editing" ng-model="user.emailId"/>
<span ng-if="!user.editing">{{user.emailId}}</span></td>
<td>
<input type="text" ng-if="user.editing" ng-model="user.country"/>
<span ng-if="!user.editing">{{user.country}}</span></
<td><input type="button" ng-if="!user.editing" class="btn btn-primary" ng-click="editUsersTableFunc(user)" value="Edit"/>
<input type="submit" ng-if="user.editing" ng-click="saveField(user)" value="Save" class="btn btn-primary" />
<input type="submit" ng-if="user.editing" ng-click="resetFunc(user);" value="Cancel" class="btn btn-primary" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
所以这是正在发生的事情：
1）当您点击“修改”按钮时，它会触发$scope.editUsersTableFunc(user)。当您将user作为参数传递时，实际上会传递$scope.usersTable的元素。这是因为 index.html 中的dir-paginate="user in usersTable"。因此，editUsersTableFunc()函数user等于$scope.usersTable[$scope.editing]或等于{firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US"}换句话说。在此函数的第一行，您编写user.editing = true;，从而现在$scope.usersTable[$scope.editing] = {firstName: "a", lastName: "b", emailId: "abc@efg.com", country: "US", editing: true}。请注意，这是新属性编辑：true 。在下一步中，您将此 user保存在$scope.newField中（复制）。
你还在关注吗？=）
2）现在当您点击“取消”按钮时，$scope.resetFunc()会触发。您也可以在此处传递user。现在有属性编辑：true （user.editing === true）。然后你写user.editing = false。是的，现在inputs必须消失... 但是！之后您通过下一行重新分配user：$scope.usersTable[$scope.editing] = $scope.newField;。是的，现在再次user.editing等于 true （因此会显示），因为$scope.newField包含user，其属性为编辑：true
3）当您第二次点击“取消”时，您会传递新 user作为参数。您实际上已通过$scope.usersTable[$scope.editing]并在第2步结束时成为$scope.newField。所以现在当你写user.editing = false时，你做$scope.newField.editing = false。它有效。
希望你明白 =）
以下是关于如何解决问题的plunker示例。我只更改了resetFunc：
$scope.resetFunc = function (user) {
$scope.newField.editing = false;
$scope.usersTable[$scope.editing] = $scope.newField;
}