将 ng-repeat 数据传递到 angular ui 路由器中的另一个状态?

问题描述

我在 angularjs 中遇到了 ui-router 的问题.我正在尝试将数据从一种状态传递到另一种状态.

数据:

$scope.MyData = [{"name": "爱丽丝","年龄": "20",电子邮件":[email protected]"},{"name": "鲍勃","年龄": "20",电子邮件":[email protected]"}];

查看:

当用户点击这个 div 时，我想在 contact.details 状态视图中显示点击的联系人的电子邮件数据.

控制器:

 .config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('contact.list', {网址:'/联系人'，templateUrl: 'templates/contact-list.html',控制器:'contactCtrl'}).state('contact.details', {url: '/联系方式',templateUrl: 'templates/contact-details.html',控制器:'contactCtrl'})

解决方案

你的 contact.details 状态应该有 params .像这样:

.state('contact.details', {url: '/联系方式',参数:{联系方式:空}，templateUrl: 'templates/contact-details.html',控制器:'contactCtrl'})

把下面的属性从你想打开上面状态的地方放:

而且，您应该能够使用给定的信息导航到该状态.您可以通过注入 $stateParams 然后使用 $stateParams.contact 来访问 contact.details 控制器中的 contact

I am facing some problem with ui-router in angularjs. I am trying to pass data from one state to another.

Data:

$scope.MyData = [

{
  "name": "Alice",
  "age": "20",
  "email": "[email protected]"
},

{
  "name": "Bob",
  "age": "20",
  "email": "[email protected]"
}
];

View:

  <div ng-repeat="data in MyData" >
        <div>
          <span>Name: {{data.name}}</span>
          <span>Age: {{data.age}}</span>
        </div>
   </div>

When user clicks on this div, I want to display email data for clicked contact in contact.details state view.

Controller:

 .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('contact.list', {
          url: '/contacts',
          templateUrl: 'templates/contact-list.html',
          controller: 'contactCtrl'
        })

        .state('contact.details', {
          url: '/contactdetails',
          templateUrl: 'templates/contact-details.html',
          controller: 'contactCtrl'
        })

解决方案

Your contact.details state should have params .Like this:

.state('contact.details', {
    url: '/contactdetails',
    params: {contact: null},
    templateUrl: 'templates/contact-details.html',
    controller: 'contactCtrl'
})

put the following attribute from where you want to open the above state:

<a ... ui-sref="contact.details({contact: data})" ...>...</a>

And, you should be able to navigate to that state with given information. You can access contact in contact.details's controller by injecting $stateParams and then with $stateParams.contact

这篇关于将 ng-repeat 数据传递到 angular ui 路由器中的另一个状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！