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

Question

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

If you'd like to observe similar issue and solution... http://stackoverflow.com/q/30288859/1679310 — Radim Köhler, Jun 19 '15 at 07:50
@RadimKöhler Can you please help here, I created a demo issue at http://plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=preview — Mike, Jun 19 '15 at 09:21
@RadimKöhler: thanks a ton buddy, I think I solved this problem but I am not sure if thats the approach approach. updated http://plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=preview — Mike, Jun 19 '15 at 09:27
I tried to express that all in answer with updated and working plunker.. hope it helps — Radim Köhler, Jun 19 '15 at 09:37

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

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

edited May 23 '17 at 12:30

Community

1
1

answered Jun 19 '15 at 09:36

Radim Köhler

122,561
47
239
335

Thanks dude, I have something nonsense to add here, I want to add ui-sref to radio button and not a link, though it works but radios wont get checked replace anchors with {{guy}} http://plnkr.co/edit/XorIs2griMOJB5Wjy6Gg?p=preview – Mike Jun 19 '15 at 09:40
Hope now you should have the answers ;) Good luck with UI-Router – Radim Köhler Jun 19 '15 at 09:51
but why do all the 3 radios get selected? – Mike Jun 19 '15 at 14:01
Yeah, just wanted to ship a version ASAP to you... here is updated one http://plnkr.co/edit/QvSS0hd3r9DKfexWY3O3?p=preview – Radim Köhler Jun 19 '15 at 14:45
Thanks Buddy, +1 added and accepted. what did you do to fix radios getting selected, all 3 initially – Mike Jun 21 '15 at 10:30
My actual problem was this. I think there is something called resolve in UI-router. Can you please help here. I need to update the same view using a controller. I put up a plunk for your reference. Thanks a Million for your help http://plnkr.co/edit/sxvtPiABbnHnkDjVbDE6?p=preview – Mike Jun 24 '15 at 11:14
Tried to do my best to guess what you wanted.. check my answer.. hope it helps – Radim Köhler Jun 24 '15 at 11:49

score 1 · Answer 2 · answered Jun 19 '15 at 07:47

1

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.

answered Jun 19 '15 at 07:47

fantarama

862
6
14

I think you asking me same question? – Mike Jun 19 '15 at 09:16
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. – Mike Jun 19 '15 at 09:16

score 1 · Answer 3 · edited May 23 '17 at 12:01

1

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

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

3 Answers3