在 angularJS 1x 中显示已编辑的数据以及表格的同一行中的先前数据

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.newField = [];
$scope.editing = false;
$scope.data = [{
"supplier_name": "ABC",
"first_name": "example",
"last_name": "test",
"email": "example@abc.com",
"telephone_number": "919-575-5506"
}, {
"supplier_name": "XYZ",
"first_name": "test",
"last_name": "example",
"email": "example@abc.com",
"telephone_number": "919-575-5506"
}]
$scope.editData = function(field) {
$scope.editing = $scope.data.indexOf(field);
$scope.newField[$scope.editing] = angular.copy(field);
console.log($scope.data.indexOf(field));
}
$scope.saveData = function(index) {
$scope.data[$scope.editing] = $scope.newField;
};
$scope.cancel = function(index) {
$scope.data[index] = $scope.newField[index];
$scope.editing = false;
};
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table id="supplierTable">
<thead>
<tr>
<th id="supplier_name">Supplier Name</th>
<th id="first_name">First Name</th>
<th id="last_name"> Last Name</th>
<th id="email">Email</th>
<th id="telephone_number">phone</th>
<th>Action
</th>
</tr>
</thead>
<tbody>
<tr name="supplierTable" data-ng-repeat="supplier in data">
<td>
<div ng-hide="editMode">{{supplier.supplier_name}}</div>
<div ng-show="editMode"><input type="text" name="supplier_name" ng-model="supplier.supplier_name" readonly />
</div>
</td>
<td>
<div ng-hide="editMode">{{supplier.first_name}}</div>
<div ng-show="editMode"><input type="text" name="first_name" ng-model="supplier.first_name" required />
</div>
</td>
<td>
<div ng-hide="editMode">{{supplier.last_name}}</div>
<div ng-show="editMode"><input type="text" name="last_name" ng-model="supplier.last_name" required />
</div>
</td>
<td>
<div ng-hide="editMode">{{supplier.email}}</div>
<div ng-show="editMode"><input type="email" name="email" size="30" ng-model="supplier.email" required />
</div>
</td>
<td>
<div ng-hide="editMode">{{supplier.telephone_number}}</div>
<div ng-show="editMode"><input type="tel" ng-model="supplier.telephone_number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
</div>
</td>
<td>
<button ng-hide="editMode" data-ng-click="editMode = true; editData(supplier)">Edit</button>
<button ng-disabled="supplierTable.$invalid" ng-show="editMode" data-ng-click="editMode = false;">
Save</button>
<button ng-show="editMode" data-ng-click="editMode = false; cancel($index)">Cancel</button>
</td>
</tr>
</div>
</tbody>
</table>
</div>
</body>
</html>

我正在尝试在同一行中显示保存数据和编辑数据的结果。我已经实现了内联编辑和保存功能。现在我正在尝试做的是将我以前的条目与存储在 $scope.newField = [] 中的新数据联系起来;并在点击保存按钮后在同一行中显示。我尝试过这种方法，但我的问题是最初 $scope.newField = [] 是空的，一旦我进行更改，我将在 $scope.newField = []; 中有数据。关于如何实现此目的的任何建议。

您的代码存在一些问题。例如：

变量$scope.editing是布尔值，但你写$scope.editing = $scope.data.indexOf(field)
您无处saveData运行函数

我更改了您的代码。您只能在现场First Name上对其进行测试。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
previousDataBuffer = {}
editingIndex = null;
$scope.data = [{
"supplier_name": "ABC",
"first_name": "example",
"last_name": "test",
"email": "example@abc.com",
"telephone_number": "919-575-5506"
}, {
"supplier_name": "XYZ",
"first_name": "test",
"last_name": "example",
"email": "example@abc.com",
"telephone_number": "919-575-5506"
}];

$scope.previousData = new Array($scope.data.length);
$scope.editData = function(index) {
previousDataBuffer = angular.copy($scope.data[index]);
editingIndex = index;
}
$scope.saveData = function(index) {
$scope.previousData[index] = previousDataBuffer;
editingIndex = null;
};
$scope.cancel = function(index) {
$scope.data[index] = angular.copy(previousDataBuffer);
editingIndex = null;
};
$scope.isEditingRow = function(index) {
return index === editingIndex;
};
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table id="supplierTable">
<thead>
<tr>
<th id="supplier_name">Supplier Name</th>
<th id="first_name">First Name</th>
<th id="last_name"> Last Name</th>
<th id="email">Email</th>
<th id="telephone_number">phone</th>
<th>Action
</th>
</tr>
</thead>
<tbody>
<tr name="supplierTable" data-ng-repeat="supplier in data">
<td>
<div ng-hide="isEditingRow($index)">{{supplier.supplier_name}}</div>
<div ng-show="isEditingRow($index)"><input type="text" name="supplier_name" ng-model="supplier.supplier_name" readonly />
</div>
</td>
<td>
<div ng-hide="isEditingRow($index)">
<span ng-if="previousData[$index].first_name && previousData[$index].first_name != supplier.first_name">{{previousData[$index].first_name}} / </span>
{{supplier.first_name}}</div>
<div ng-show="isEditingRow($index)"><input type="text" name="first_name" ng-model="supplier.first_name" required />
</div>
</td>
<td>
<div ng-hide="isEditingRow($index)">{{supplier.last_name}}</div>
<div ng-show="isEditingRow($index)"><input type="text" name="last_name" ng-model="supplier.last_name" required />
</div>
</td>
<td>
<div ng-hide="isEditingRow($index)">{{supplier.email}}</div>
<div ng-show="isEditingRow($index)"><input type="email" name="email" size="30" ng-model="supplier.email" required />
</div>
</td>
<td>
<div ng-hide="isEditingRow($index)">{{supplier.telephone_number}}</div>
<div ng-show="isEditingRow($index)"><input type="tel" ng-model="supplier.telephone_number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
</div>
</td>
<td>
<button ng-hide="isEditingRow($index)" data-ng-click="editData($index)">Edit</button>
<button ng-disabled="supplierTable.$invalid" ng-show="isEditingRow($index)" data-ng-click="saveData($index)">
Save</button>
<button ng-show="isEditingRow($index)" data-ng-click="cancel($index)">Cancel</button>
</td>
</tr>
</div>
</tbody>
</table>
</div>
</body>
</html>

相关内容

最新更新

热门标签：