I'm trying to get the userlist [master] and user details[detail] on the same page.
https://plnkr.co/edit/EKY2pztGkKXUuQIyefUY?p=preview
module and configuration.
var myModule = angular.module("myApp", ['ui.router']);
myModule.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('user', {
url : '/users',
templateUrl:'users.html',
controller : 'usersController'
})
.state('user.details', {
url : '/:id',
templateUrl:'users.html',
controller : 'usersControllerDetail'
});
$urlRouterProvider.otherwise("/users");
});
myModule.controller('usersController' , function($scope){
$scope.users = [{username : 'manish', id : 1}, { username : 'kaustubh', id :2} ]
});
myModule.controller('usersControllerDetail' , function($scope, $stateParams){
console.log($stateParams.id);
});
when ever I click on the user in the master list , master list is rendered twice on scree.
can you please let me know where I'm going wrong
There is adjusted and working plunker
Just use different template for a child
.state('user.details', {
url : '/:id',
//templateUrl:'users.html',
templateUrl:'details.html',
controller : 'usersControllerDetail'
});
this could be the template
<div>
<div ui-view>
<h3>current state name: <var>{{$state.current.name}}</var></h3>
<h5>params</h5>
<pre>{{$stateParams | json}}</pre>
<h5>state</h5>
<pre>{{$state.current | json}}</pre>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.