I am learning AngularJs and I have developed an application that displays a list of records in a table. For example: EmpNo Name 1 AAAA 2 BBBB 3 CCCC Now, my requirement is to be able to click on the EmpNo in the table and have a pop-up (new HTML Template) display with all the employee records associated with the selected EmployeeNo.
For instance, if someone clicks on EmpNo: 1, the data in the pop-up should show: EmpNo: 1 Name: AAAA Unit: XYZ Manager's Name: LLLL I would greatly appreciate it if you could provide an example. Thank you in advance. Below is some sample code snippet from my application:
HTML:
<a href ui-sref="stateTruckDetails({transferSessionId: x.transferSessionId})">{{x.location}}</a>JavaScript: for managing application state
app.config(function($stateProvider,TRANSFER_COMPONENT_PATH)
{
$stateProvider
.state("stateTruckDetails",
{ url: "/transfers/truckDetails/:transferSessionId",
controllerAs: "truckDetailsCtrl",
controller: "TruckDetailsController",
params: { tansferSessionId: $stateProvider.transferSessionId }
});
});The JavaScript code for the controller that my pop up needs to utilize:
app.controller('TruckDetailsController', function (transferService, $scope, dataShare, $stateParams)
{
//This API call fetches details based on ID. In this case, the number 13.
ctrl.GetTruckDetails = transferService.getTruckDetails(13).then(function (d)
{
$scope.data = d;
angular.forEach($scope.data, function (value, index)
{
console.log(index);
});
});
}; }); }