AngularJS $ stateParams - ネストされたJSONデータにアクセス

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に私の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

シンプル、我々はIDを渡したいと仮定しましょう、タイトルとemployeePaymentsの条件のために$stateParamsを使用してください。状態の定義で

：

.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()の

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

最初の引数は、私たちの状態のparamsのオブジェクトによって、最終的にいくつかのオプションに続いて、我々は我々のアプリケーションが行きたい状態であります。あなたはより詳細な外観を取ることができますhere。