AngularJS - 将 JSON 对象数据从单击的 ng-repeat 项目传递到新的项目特定状态/视图

Question

我尝试使用 stateparams 将 ng-repeat 列表中单击项目的数据传递到一个新视图，该视图显示详细信息列表/该项目（员工）的数据，我已经能够做到，但仅适用于顶级数据属性，不适用于这些项目的子数组中的数据。

除了使用 stateparams（我不确定这是否是正确的方法）之外，我还能如何做到这一点，以便可以在新状态/视图中显示如下数据，包括每个的详细信息员工的付款，我想在表格中重复吗？

员工服务：

app.service('employeesService', function() {

    var employees = [
    {
        id: '21101994',
        icon: 'img/icon.png',
        iconAlt: 'N C Image',
        title: 'Mr',
        firstName: 'N',
        lastName: 'C',
        dateOfBirth: '21/10/1994',
        niNumber: 'JZ123456D',
        jobTitle: 'Web Developer',
        department: 'Development',
        joinDate: '18/04/2017',
        leaveDate: '18/04/2017',
        email: 'example@mail.com',
        phonePrimary: '07123 456789',
        phoneSecondary: '07123 456789',
        menu: 'ncMenu',
        employeePayments: [
            {
                id: 1,
                code: 'TEST',
                paymentType: '',
                hours: '',
                zeroiseHours: false,
                partPay: false,
                rate: '',
                employerPercentage: '',
                pay: '',
                paidPer: '',
                fromDate: '',
                sequence: '',
                employerPension: '',
                csaReference: '',
                suspend: false,
                netToGross: false,
                requiredTotal: '',
                paidToDate: '',
                protectedNet: '',
                arrearsCarried: ''
            },
            {
                id: 2,
                code: 'TEST',
                paymentType: '',
                hours: '',
                zeroiseHours: false,
                partPay: false,
                rate: '',
                employerPercentage: '',
                pay: '',
                paidPer: '',
                fromDate: '',
                sequence: '',
                employerPension: '',
                csaReference: '',
                suspend: false,
                netToGross: false,
                requiredTotal: '',
                paidToDate: '',
                protectedNet: '',
                arrearsCarried: ''
            },
        ]
    },
    {
        id: '1',
        icon: '',
        iconAlt: 'Employee 2 Image',
        title: 'Mr',
        firstName: 'A',
        lastName: 'Z',
        dateOfBirth: '01/01/2000',
        niNumber: 'JZ123456D',
        jobTitle: 'Job Title',
        department: 'Testing',
        joinDate: '01/01/2017',
        leaveDate: '01/01/2017',
        email: 'example@mail.com',
        phonePrimary: '07000 123456',
        phoneSecondary: '0151 123456',
        menu: 'employee2Menu'
    },
]

var getEmployees = function() {
    return employees;
}

return {
    getEmployees: getEmployees
}

-

员工详细信息的当前状态（单击我要将数据传递到的位置）：

.state('employees/employeeDetails', {
        url: '/employees/employeeDetails/:employeeId/:icon/:iconAlt/:title/:firstName/:lastName/:dateOfBirth/:niNumber/:jobTitle/:department/:joinDate/:leaveDate/:email/:phonePrimary/:phoneSecondary/:employeePayments',
        templateUrl: 'pages/employees/employeeDetails.html',
        params: {
            employeeId: null,
            icon: null,
            iconAlt: null,
            title: null,
            firstName: null,
            lastName: null,
            dateOfBirth: null,
            niNumber: null,
            jobTitle: null,
            department: null,
            joinDate: null,
            leaveDate: null,
            email: null,
            phonePrimary: null,
            phoneSecondary: null,
            employeePayments: null
        },
        controller: 'employeeDetailsController'
    })

-

employeeDetailsController：

app.controller('employeeDetailsController', function($scope, $state, $stateParams, $document, employeesService) {
$scope.employeeId = $stateParams.employeeId;
$scope.icon = $stateParams.icon;
$scope.iconAlt = $stateParams.iconAlt;
$scope.title = $stateParams.title;
$scope.firstName = $stateParams.firstName;
$scope.lastName = $stateParams.lastName;
$scope.dateOfBirth = $stateParams.dateOfBirth;
$scope.niNumber = $stateParams.niNumber;
$scope.jobTitle = $stateParams.jobTitle;
$scope.department = $stateParams.department;
$scope.joinDate = $stateParams.joinDate;
$scope.leaveDate = $stateParams.leaveDate;
$scope.email = $stateParams.email;
$scope.phonePrimary = $stateParams.phonePrimary;
$scope.phoneSecondary = $stateParams.phoneSecondary;
$scope.employeePayments = $stateParams.employeePayments;

Answer 1

在您的 ng-repeat 中添加带有以下路径的 ng-href（注意 id 绑定表单 ng-repeat 项）。

<div ng-repeat="item in employees">
    <a ng-href="/ViewEmployee/{{item.id}}">View Profile</a>
</div>

您的路由器，您需要从上面添加路径，ViewEmployee 现在需要一个 id 作为参数（例如 /ViewEmployee/123）。

.when("/ViewEmployee/:id", {
    templateUrl: "views/viewemployee.html",
    controller: "EmployeePreviewController"
})

然后在您的控制器中，注入 $routeParams 以从路由器中检索 id。 然后，您需要从您的服务中检索员工数组，迭代每个值并检查 id 是否与 $routeParams 中的值匹配，根据上面的示例，它将是 123。

如果数组中存在记录，则将该对象添加到 $scope.EmployeeRecord 模型中

app.controller('employeeDetailsController', function($scope, $routeParams, employeesService) {
   var employees = employeesService.getEmployees();
   $scope.EmployeeRecord = {};

    for (var i = 0, i < employees.length; i++) {
        if(employees[i].id == $routeParams.id){
            $scope.EmployeeRecord = employees[i];
        }
    }
});

您的视图现在有一个名为 EmployeeRecord 的模型，其中包含在找到 id 时填充的数据。

<div>{{EmployeeRecord.title}}</div>
<div>{{EmployeeRecord.jobTitle}}</div>