你好，我有以下代码，它工作正常，但是尽管名称不同（表中的employee.first_name和模型中的currentemployee.firstname），但我的数据绑定在模态下使用ng-model的位置。为什么会这样呢？谁能在这方面指导我。无论我正在使用可能被取消或保存的模型做什么，我都希望表中的数据保持不变。但是表数据应该保持不变。我打开的每一行数据都应以模式填充。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="main.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container mt-5">
<table id="employeeTable">
<thead>
<tr>
<th>employee Name</th>
<th>Contact First Name</th>
<th>Contact Last Name</th>
<th>Contact Email</th>
<th>Contact Telephone</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr name="employeeTable" data-ng-repeat="employee in employees | orderBy:sortType:sortReverse">
<td>
{{employee.employee_name}}
</td>
<td>
{{employee.first_name}}
</td>
<td>
{{employee.last_name}}
</td>
<td>
{{employee.email}}
</td>
<td>
{{employee.tel_number}}
</td>
<td>
<button class="editButton searchExcelButton" data-toggle="modal" data-target="#updateemployeeModal"
class="btn" ng-click="updateemployeeInit(employee)">
<i class="fa fa-edit"></i> Edit
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="modal fade col-md-6" id="updateemployeeModal">
<div class="modal-content">
<div class="modal-heading">
<h1>Update {{currentemployee.employee_name}}</h1>
</div>
<div class="modal-body">
<form name="updateemployeeForm" class="col" ng-submit="saveemployee()">
<div class="form-group">
<label for="employee_name">employee Name</label>
<input type="text" ng-model="currentemployee.employee_name" class="form-control" id="employee_name"
placeholder="employee Name" style="width: 100%; height: 35px;" ng-trim="true"
ng-pattern="nameRegex" readonly>
</div>
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" name="first_name" ng-model="currentemployee.first_name" class="form-control"
id="first_name" placeholder="First Name" style="width: 100%; height: 35px;" ng-trim="true"
ng-pattern="nameRegex" maxlength="50" minlength="4" required ng-readonly="currentemployee.processed==='I'">
<span class="error" ng-show="updateemployeeForm.first_name.$error.required">
Required! </span>
</div>
<div class="form-group">
<label for="last_name">Last Name</label> <input type="text" name="last_name" ng-model="currentemployee.last_name"
class="form-control" id="last_name" placeholder="Last Name" style="width: 100%; height: 35px;"
ng-trim="true" ng-pattern="nameRegex" maxlength="50" minlength="4" required ng-readonly="currentemployee.processed==='I'">
<span class="error" ng-show="updateemployeeForm.last_name.$error.required">
Required! </span>
</div>
<div class="form-group">
<label for="email">Contact Email</label> <input type="text" name="email" ng-model="currentemployee.email"
class="form-control" id="email" placeholder="email" style="width: 100%; height: 35px;"
ng-trim="true" required ng-readonly="currentemployee.processed==='I'">
<span class="error" ng-show="updateemployeeForm.email.$invalid">
Invalid number</span>
</div>
<div class="form-group">
<label for="tel_number">Telephone Number</label> <input type="text" name="tel_number"
ng-model="currentemployee.tel_number" class="form-control" id="tel_number" placeholder="Phone number"
style="width: 100%; height: 35px;" ng-trim="true" ng-pattern="phoneRegex" required
ng-readonly="currentemployee.processed==='I'">
<span class="error" ng-show="updateemployeeForm.telephone_number.$invalid">
Invalid number</span>
</div>
</form>
</div>
<div class="modal-footer">
<button class="saveButton btn btn-success" data-dismiss="modal" ng-disabled="updateemployeeForm.$invalid"
data-ng-click="saveemployee()">
<i class="fa fa-save"></i> Save
</button>
<button class="cancelButton btn" ng-click="reset(currentemployee)" data-dismiss="modal">
<i class="fa fa-times"></i> Cancel
</button>
</div>
</div>
</div>
</div>
这是我的js文件
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
// Main Table simulation
$scope.employees = [
{
"employee_name": "ABC",
"first_name": "example",
"last_name": "test",
"email": "example@abc.com",
"tel_number": "919-575-5506",
"external_id": "1234"
},
{
"employee_name": "XYZ",
"first_name": "test",
"last_name": "example",
"email": "example@abc.com",
"tel_number": "919-575-5506",
"external_id": "12345"
},
{
"employee_name": "ABC",
"first_name": "test",
"last_name": "example",
"email": "example@abc.com",
"tel_number": "919-575-5506",
"external_id": "123456"
}
];
$scope.temp = [];
$scope.currentemployee = {};
$scope.buttonText = "Submit";
$scope.saveemployee = function () {
// Backend has to handle this
// If it was loaded from temp table
// In this case we are looking for the matching external_id and we update values
if ($scope.loadFrom === 'temp') {
// Update method to backend
for (var g = 0; g < $scope.temp.length; g++) {
if ($scope.temp[g].external_id === $scope.currentemployee.external_id) {
// Editing process
$scope.temp[g].first_name = $scope.currentemployee.first_name;
$scope.temp[g].last_name = $scope.currentemployee.last_name;
$scope.temp[g].email = $scope.currentemployee.email;
$scope.temp[g].tel_number = $scope.currentemployee.tel_number;
}
}
} else {
// Save method to backend
// In this case we are adding the current value to the temp array
$scope.temp.push({
"first_name": $scope.currentemployee.first_name,
"last_name": $scope.currentemployee.last_name,
"email": $scope.currentemployee.email,
"tel_number": $scope.currentemployee.tel_number,
"external_id": $scope.currentemployee.external_id,
"processed": "N" // Processed as N always
});
}
};$scope.canclBuffer = angular.copy($scope.currentemployee);
$scope.updateemployeeInit = function (employee) {
$scope.currentemployee = employee;
$scope.canclBuffer = angular.copy(employee);
console.log("Cancel Buffer ="+$scope.cancelBuffer);
$scope.currentemployee.processed = "N";
console.log($scope.currentemployee);
if ($scope.currentemployee === null) {
$scope.loadFrom = "main";
// Loading from Main Table
$scope.currentemployee = employee;
}
};
$scope.reset = function(employee) {
$scope.currentemployee = employee;
};
$scope.getFromTemp = function (employee) {
// Makes a search in the temp table
// Search external id
for (var f = 0; f < $scope.temp.length; f++) {
// Comparing ids.
if ($scope.temp[f].external_id === employee.external_id)
return $scope.temp[f];
}
return null;
};
});