[英]AngularJS render updated record + Laravel backend
<div class="col-xs-12">
<h2>Listing Employee</h2>
<hr>
<div class="employeeGrid">
<table>
<tr>
<th><a href="" ng-click="orderByField='name'; reverseSort = !reverseSort">Name</a></th>
<th><a href="" ng-click="orderByField='age'; reverseSort = !reverseSort">Age</a></th>
<th><a href="" ng-click="orderByField='gender'; reverseSort = !reverseSort">Gender</a></th>
<th><a href="" ng-click="orderByField='company'; reverseSort = !reverseSort">Company</a></th>
<th>Action</th>
</tr>
<tr ng-repeat="person in employee | orderBy:orderByField:reverseSort"">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.gender}}</td>
<td>{{person.company}}</td>
<td>
<button class="btn" ng-click="viewEmployee(person.id)"><span class="glyphicon glyphicon-eye-open"></button>
<button class="btn" ng-click="editEmployee(person.id)"><span class="glyphicon glyphicon-pencil"></button>
<button class="btn" ng-click="deleteEmployee(person.id)"><span class="glyphicon glyphicon-trash"></button>
</td>
</tr>
</table>
</div>
EmployeeController.js
scope = $scope;
scope.employee = [];
scope.$on('$stateChangeSuccess', function () {
scope.init();
});
scope.init = function(){
$http({
method: 'GET',
url: '/api/v1/employee/list'
}).then(function successCallback(response){
scope.employee = response.data;
});
}
scope.editEmployee = function(val){
empScope = $scope;
$uibModal.open({
animation: false,
templateUrl: '../assets/templates/modal/employee/updateEmployee.php',
controller: 'UpdateEmployeeController',
size: '',
backdrop: 'static',
resolve: { empId: function () { return val; } }
}).result.catch(function(res) {
if (!(res === 'cancel' || res === 'escape key press')) {
throw res;
}
});
};
UpdateEmployeeController.js
scope = $scope;
scope.employee = [];
$http({
method: 'GET',
url: '/api/v1/employee/get/' + scope.$resolve.empId
}).then(function successCallback(response){
scope.employee = response.data;
});
scope.updateEmployee = function(){
$http({
method: 'POST',
url: '/api/v1/employee/update/' + scope.$resolve.empId,
data: {
name:scope.employee.name,
age:scope.employee.age,
gender:scope.employee.gender,
company:scope.employee.company
}
}).then(function successCallback(response){
//console.log(response.data);
}, function errorCallback(response) {
console.log(response.data);
});
//scope.$dismiss('cancel');
}
EmployeeController.php
public function lsAll(){
$employee = Employee::all();
return $employee;
}
public function getOne($id){
$employee = Employee::find($id);
return $employee;
}
public function update(Request $request, $id){
$employee = Employee::findOrFail($id);
$name=$request->input('name');
$age=$request->input('age');
$gender=$request->input('gender');
$company=$request->input('company');
$employee->name = $name;
$employee->age = $age;
$employee->gender = $gender;
$employee->company = $company;
if($employee->save()){
return response()->json(['response' => 'The employee record is updated successful']);
}else{
return response()->json(['response' => 'Failed to update the employee record']);
}
}
题
如何在编辑操作期间将事件从UpdateEmployeeController解析为EmployeeController,并使用数据库中的更新数据呈现(重新加载)特定记录。
您的控制器似乎在兄弟姐妹,这意味着他们无法彼此交谈。 在兄弟姐妹之间进行交流的唯一方法是通过父母。 幸运的是, $rootScope
始终是一个共同的祖先。 首先,将$rootScope
传递给您的UpdateEmployeeController。 然后,您的scope.updateEmployee
函数,转到scope.updateEmployee
.then()
并执行
.then(function successCallback(response){
$rootScope.$broadcast('employeeWasUpdated', response.data);
}
回到您的EmployeeController
scope.$on('employeeWasUpdated', function (event, args) {
scope.init();
//console.log(args) //outputs response.data content
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.