Question

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

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

employeesService：

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:51592/swagger",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "API": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:5000/swagger"
    }
  }
}

-

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

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
}

-

employeeDetailsController：

.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'
    })

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中的id匹配，基于上面的示例，它将是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>

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

1 个答案: