http://plnkr.co/edit/3UMwSK6H5VL0pZujL7Qh?p=preview
Click edit and then cancel. The text boxes do not go away. Click cancel again, they go away. Please tell me why this is happening. I am losing my mind over this.
Thanks is advance. :)
Here is the code:
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: "[email protected]", country: "US" },
{ firstName: "a", lastName: "b", emailId: "[email protected]", country: "US" },
{ firstName: "a", lastName: "b", emailId: "[email protected]", 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>So here's what's going on:
1) When you click on "Edit" button it triggers $scope.editUsersTableFunc(user). Here when you pass user as a parameter, you actually pass element of your $scope.usersTable. This is because of dir-paginate="user in usersTable" in index.html. So in editUsersTableFunc() function user equals to $scope.usersTable[$scope.editing] or equals to {firstName: "a", lastName: "b", emailId: "[email protected]", country: "US"} in other words. At first line in this function you write user.editing = true; and thereby now $scope.usersTable[$scope.editing] = {firstName: "a", lastName: "b", emailId: "[email protected]", country: "US", editing: true}. Note here is new property editing: true. At the next step you save THIS user in $scope.newField (copy it).
Are you still following?=)
2) Now when you click on "Cancel" button, $scope.resetFunc() triggers. You also pass user here. Which now has property editing: true (user.editing === true). Then you write user.editing = false. Yes, now inputs have to disappear...but! right after that you reassign your user via next line: $scope.usersTable[$scope.editing] = $scope.newField;. Yep, and now again user.editing is equal to true (so it is shown), because $scope.newField contain user with property editing: true.
3) When you click on "Cancel" second time, you pass new user as the parameter. You actually pass $scope.usersTable[$scope.editing] and in the end of step 2) it became $scope.newField. So now when you write user.editing = false you do $scope.newField.editing = false. And it works.
Hope you get it =)
Here is my plunker example on how you can fix it. I only changed resetFunc:
$scope.resetFunc = function (user) {
$scope.newField.editing = false;
$scope.usersTable[$scope.editing] = $scope.newField;
}