1
http://plnkr.co/edit/3UMwSK6H5VL0pZujL7Qh?p=previewAngularJSモデルの更新を元に戻す
編集をクリックしてキャンセルします。テキストボックスは消えません。キャンセルをもう一度クリックすると、離れる。なぜこれが起こっているのか教えてください。私はこれを忘れている。
ありがとうございます。 :)ここで
コードです：
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>
ありがとうございます！ :) – Aditi