current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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

share|improve this question
    
If you'd like to observe similar issue and solution... stackoverflow.com/q/30288859/1679310 – Radim Köhler Jun 19 '15 at 7:50
    
@RadimKöhler Can you please help here, I created a demo issue at plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=preview – Mike Jun 19 '15 at 9:21
    
Of course, give me few minutes – Radim Köhler Jun 19 '15 at 9:22
    
@RadimKöhler: thanks a ton buddy, I think I solved this problem but I am not sure if thats the approach approach. updated plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=preview – Mike Jun 19 '15 at 9:27
    
I tried to express that all in answer with updated and working plunker.. hope it helps – Radim Köhler Jun 19 '15 at 9:37
up vote 2 down vote accepted

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

share|improve this answer
    
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 <input type="radio" ui-sref="guy_route2({index: $index})" name="something" />{{guy}} plnkr.co/edit/XorIs2griMOJB5Wjy6Gg?p=preview – Mike Jun 19 '15 at 9:40
    
Hope now you should have the answers ;) Good luck with UI-Router – Radim Köhler Jun 19 '15 at 9: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 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
up vote 1 down vote

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.

share|improve this answer
    
I think you asking me same question? – Mike Jun 19 '15 at 9: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 9:16
up vote 1 down vote

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

share|improve this answer
    
Thanks a milllion buddy but I just want a simple partial to load the data using controller, I dont want to have file1, file2, file3 partails. Single partial is supposed to contain the data for all the three routes. – Mike Jun 24 '15 at 16:35
    
There is another plunker plnkr.co/edit/tnqjJFn9rGwmrzA0a6u8?p=preview - Maybe, I did too much.. ;) to reduce that child state features was not an issue.. (it was more a bonus ;) So, do you have your answer? is this resolve : {} stuff workgin for you? Simply not sure about your comment... – Radim Köhler Jun 24 '15 at 16:39
    
Thanks dude, it is really helpful but in $scope.guy = $scope.guys[$stateParams.id]; what is guy? Is it state or data of ng-repeat? – Mike Jun 25 '15 at 7:51
    
Sorry, Mike, have to stop here. I am not consultant for free for sure ;) And while only measure if answer is helpful here is up-voting and accepting, the only/last thing I can add here: glad if I helped For more details, please issue new question. You will get more attention from larger audience. If you'd not be getting the answer - and think I can help ;) - let me know, share a link... I do like to assist, but with some results... ;) good luck, sir – Radim Köhler Jun 25 '15 at 8:36
    
thanks it was helpful. but please dont call me sir. – Mike Jun 25 '15 at 12:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.