How can I route to different URLS in angularjs UI-Router for items in ng-repeat, Need to modify state in ui-router

Question

How can I route to different URLS in angularjs UI-Router for items in ng-repeat, Need to modify state in ui-router

2.8k Views Asked by Mike At 24 April 2025 at 01:48

I am using UI-Router and my html looks something below:

<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
File2
File3

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

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

thanks much

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

Original Q&A

There are 3 best solutions below

fantarama On 19 June 2015 at 07:47

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.

Radim Köhler On 24 June 2015 at 11:48

As discussed in comments here, we can use even resolve.

There is a working plunker

This could be the 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. 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:

  .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

Check it here

See also

**Radim Köhler** · Accepted Answer

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. And the 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})

Check that all here

The templateProvider "magic" details could be found here:

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

How can I route to different URLS in angularjs UI-Router for items in ng-repeat, Need to modify state in ui-router

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULAR-UI-ROUTER

Related Questions in ANGULARJS-ROUTING

Trending Questions

Popular # Hahtags

Popular Questions