如何在ng-repeat中将项目路由到angularjs UI-Router中的其他URL，需要在ui-router中修改状态

Question

I am using UI-Router and my html looks something below: 我正在使用UI-Router，而我的html如下所示：

<body ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>
  <ul>
    <li ng-repeat = "guy in  guys">
      <a ui-sref="person">{{guy}}{{$index+1}}</a>
    </li>
  </ul>
</body>

The output is below: 输出如下：

Hello Plunker! 你好，笨蛋！

File1 文件1
File2 文件2
File3 文件3

and my angular code is something like below: 我的角度代码如下所示：

var app = angular.module('app', ['ui.router']);

app.controller('myCtrl', function($scope) {
  $scope.val = "This is my Message..."
  $scope.guys = ['File1','File2','File3']
});

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('person{something needs to be here}', {
        url: "/route1",
        templateUrl: "file1.html"
    })
    .state('person{something needs to be here}', {
        url: "/route2",
        templateUrl: "file2.html"
    })    
})

Can someone help with with what needs to be populated here, My goal is that clicking File1 should open file.html and clicking file2 should open file2.html 有人可以帮忙解决这里需要填充的内容吗，我的目标是单击File1应该打开file.html，单击file2应该打开file2.html

In short my question is how do I open different files/templates/partials when clicking on items that are repeated in an ng-repeat directive and how to specify url parameters in state of UI-Router 简而言之，我的问题是单击ng-repeat指令中重复的项目时如何打开不同的文件/模板/部分，以及如何在UI-Router状态下指定url参数

thanks much 非常感谢

http://plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=preview http://plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=预览

Answer 1

I created an updated plunker here 我在这里创建了一个更新的插件

State would be looking like this: 州将看起来像这样：

.state('guy_route2', {
    url: "/route/{index:int}",
    templateProvider: function($templateRequest, $stateParams) {

      var index = $stateParams.index + 1;
      var templateName = 'file' + index + '.html';

      return $templateRequest(templateName);
    },
})

this would be the body: 这将是身体：

<body ng-controller="myCtrl">  

  <ul>
    <li ng-repeat = "guy in guys">
      <a ui-sref="guy_route2({index: $index})">{{guy}}</a>
    </li>
  </ul>


 <h3>Target for state</h3>

 <div ui-view=""></div>
</body>

See the <div ui-view=""></div> , essential target for our states. 请参阅<div ui-view=""></div> （我们各州的基本目标）。 And the ui-sref: 和ui-sref：

 ui-sref="guy_route2({index: $index})"

where we pass the state name 'guy_route2' , and the function call contains object representing the state params ({index: $index}) 我们在其中传递状态名称'guy_route2' ，并且函数调用包含表示状态参数的对象({index: $index})

Check that all here 在这里检查所有

The templateProvider "magic" details could be found here: templateProvider的“魔术”详细信息可以在这里找到：

EXTEND: 延伸：

With a radio I would adjust it like this 随着无线电我会调整它像这样

  <h3>radio</h3>
  <ul>
    <li ng-repeat="guy in guys">
      <input type="radio" 
      value="{{$index}}"
      ng-model="Model.selected" 
      ng-change="go(Model.selected)" 
      id="something{{$index}}"
      /><label for="something{{$index}}">{{guy}}</label>
    </li>

  </ul>

And the go function 和去功能

$scope.Model = { selected: null }; 
$scope.go = function(index){ 
    $state.go('guy_route2', {index: index}) ;}
});

Check it here 在这里检查

Answer 2

Use only one route with a parameter: 仅使用带有参数的一条路线：

.state("person", {
    url: "/person/:file",
    ....
});

Then in the template controller get the file parameter with $stateParams, load the html content with $http and put the result in a ng-bind-html tag attribute. 然后，在模板控制器中，使用$ stateParams获取file参数，使用$ http加载html内容，并将结果放入ng-bind-html tag属性。

Answer 3

As discussed in comments here , we can use even resolve . 正如这里评论所讨论的，我们甚至可以使用resolve 。

There is a working plunker 有一个正在工作的矮人

This could be the data.json 这可能是data.json

[
    {
    "id":1,
    "name":"Someone 1"
    },
    {
    "id":2,
    "name":"Someone 2"
    },
    {
    "id":3,
    "name":"Someone 3"
    }
]

And these state def would use that file to produce list and a detail. 这些状态def将使用该文件生成列表和详细信息。 Parent state with resolve 父母有决心

  .state('guys', {
    url: "/route",
    templateUrl:'guys.html',
    controller:'listCtrl',
    resolve: { 
      guys: ['$http', function($http){
        return $http
            .get("data.json")
            .then(function(response){
              return response.data; 
            })
      }],
    }
  })

And child with the templating driven by passed id: 和具有通过传递的ID驱动的模板的孩子：

  .state('guy', {
    parent: 'guys',
    url: "/:id",
    controller:'MyCtrl',
    templateProvider: function($templateRequest, $stateParams) {

      var index = $stateParams.id;
      var templateName = 'file' + index + '.html';

      return $templateRequest(templateName);
    },
  })

And that should show how to use UI-Router with resolve 那应该显示如何使用UI-Router和resolve

Check it here 在这里检查

See also 也可以看看

如何在ng-repeat中将项目路由到angularjs UI-Router中的其他URL，需要在ui-router中修改状态

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-06-19 09:36:23

解决方案2
1 2015-06-19 07:47:01

解决方案3
1 2015-06-24 11:48:37

如何在ng-repeat中将项目路由到angularjs UI-Router中的其他URL，需要在ui-router中修改状态

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-06-19 09:36:23

解决方案2 1 2015-06-19 07:47:01

解决方案3 1 2015-06-24 11:48:37

解决方案1
2 已采纳 2015-06-19 09:36:23

解决方案2
1 2015-06-19 07:47:01

解决方案3
1 2015-06-24 11:48:37