Question

我在单页角度应用程序中使用stateparams将数据从一个状态传递到另一个状态，这有效，但我还需要能够从顶级对象中的数组将数据传递到这个新状态我已经访问了数据。

我的对象的一个例子：

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中尝试过我的状态框架：

.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()的第一个参数是我们希望我们的应用程序进入的状态，然后是我们的状态参数的对象，最后是一些选项。您可以更详细地查看here。

AngularJS $ stateParams - 访问嵌套的JSON数据

1 个答案: