AngularJS $ stateParams-訪問嵌套的JSON數據

Question

我在單頁角度應用程序中使用過stateparams將數據從一種狀態傳遞到另一種狀態，這是可行的，但是我還需要能夠將數據從頂層對象中的數組傳遞到這種新狀態。 ve已經訪問過數據。

我的對象的一個​​示例：

var employees = [
    {
        id: '21101994',
        icon: 'img/portfolioIcon.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，姓名等數據，但是如何從他們的employeePayments數組中傳遞數據，以便可以在表中重復顯示每個數據的詳細信息？

我為app.js中的stateparams嘗試了什么：

.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

為了簡單起見，假設我們要使用$stateParams傳遞id，title和employeePayments。

在狀態定義中：

.state('employees/employeeDetails', {
    url: '/employees/employeeDetails/',
    templateUrl: 'pages/employees/employeeDetails.html',
    params: {
        id: null,
        title: null,
        employeePayments: []
    },
    controller: 'employeeDetailsController'
})

在您的控制器中：

app.controller('employeeDetailsController', function($scope, $state, 
    $stateParams) {
    $scope.id = $stateParams.id;
    $scope.title = $stateParams.title;
    $scope.employeePayments = $stateParams.employeePayments;
    //...
}

因此，我認為您必須在params對象中更改url和employeePayments定義。

當然，最后您有了state.go()事件：

$state.go('employees/employeeDetails', {
        id: employees.id,      
        title: employees.title,                              
        employeePayments: employees.employeePayments
    }, {
        reload: true, 
        notify: true
    }
);

state.go()第一個參數是我們希望應用程序運行的狀態，其次是狀態參數的對象，最后是一些選項。 您可以在此處進行更詳細的了解。