Transfer table row data to html form page in angular - html

Question

Using Angular JS I am trying to pass the data in a table row that is populated dynamically to an html page. The page would then use that object
that is passed to populate form data.
My html looks like below:
<form data-ng-submit="submit()" name="empRegForm" method="post">
<input type="hidden" type="text" ng-model="employee.employeeId" />
<fieldset class="table-striped">
<input placeholder="Employee Project Id" type="text" ng-model="employee.projectId" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Employee Name" type="text" ng-model="employee.employeeName" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit">Submit</button>
</fieldset>
</form>
Method that I have created on the controller is as follows:
$scope.updateEmployee = function(employee) {
var response = $http.put('localhost:8080/employeeManagement/employee', employee);
response.success(function(data, status, headers, config) {
$scope.result = data;
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " + JSON.stringify({data: data}));
});
};
EmployeeList html table appears as below:
<tr ng-repeat="employee in result.listOfEntities">
<td>{{employee.employeeId}}</td>
<td>{{employee.employeeName}}</td>
<td><a ng-click="updateEmployee(employee)"> <span class="fa fa-pencil-square-o" aria-hidden="true"></span></a></td>
</tr>
I want to redirect the page to the Update html page that contains the form when this button on the row is clicked.
Thanks

Answer 1

Added ng-include to load different html page in your table page itself and to toggle it on need basis as like example below,
In controller:
$scope.loadEmployee = function(employee){
$scope.employee=employee;
$scope.employee.visible=true;
};
$scope.updateEmployee = function(employee) {
var response = $http.put('localhost:8080/employeeManagement/employee', employee);
response.success(function(data, status, headers, config) {
$scope.result = data;
});
response.error(function(data, status, headers, config) {
alert( "Exception details: " + JSON.stringify({data: data}));
});
$scope.employee.visible=false;
};
In Template:
<tr ng-repeat="employee in result.listOfEntities">
<td>{{employee.employeeId}}</td>
<td>{{employee.employeeName}}</td>
<td><a ng-click="loadEmployee(employee)"> <span class="fa fa-pencil-square-o" aria-hidden="true"></span></a></td>
</tr>
<div ng-include src="'/employee-update.html'" ng-controller="employeeController" ng-show="employee.visible"></div>
employee-update.html:
<form data-ng-submit="updateEmployee()" name="empRegForm" method="post">
<input type="hidden" type="text" ng-model="employee.employeeId" />
<fieldset class="table-striped">
<input placeholder="Employee Project Id" type="text" ng-model="employee.projectId" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Employee Name" type="text" ng-model="employee.employeeName" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit">Submit</button>
</fieldset>
</form>