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