Pass json data by selecting id using fresh scope in angularjs - json

Question

I have a table in a template which is retrieving json data something like this
`
id type date
755 video 21/09/12
`.
here is my controller of retrieving data for table
.controller('list', function($scope, $http) {
$http.get(baseUrl + '/page/1', _auth)
.success(function(data) {
$scope.value = data.data;
}, function(err) {
console.error(err);
});
$scope.detail = function(index) {
$http.get(baseUrl + '/page')
}
})
for routing i am using ui-router and doing something like this
$stateProvider
.state('/get' , {
url: '/data',
templateUrl: 'app/list/data/data.html'
})
This page also has button which redirects you to a different template on clicking any row from table. All I want is by clicking any row it redirects you to a different template and will show data only related to the id clicked. How can i achieve this? Any Help ?
Thankx

Answer 1

You'll need a route to display this particular element :
$stateProvider
.state('/get' , {
url: '/data',
templateUrl: 'app/list/data/data.html'
})
.state('/getone' , {
url: '/data/:id',
templateUrl: 'app/list/data/detail.html',
controller:"MyController"
})
You will have a param ":id" that will give you the element to show.
You can get it in your controller like this :
app.controller('MyController', function($scope, $stateParams) {
$scope.myDataId = $stateParams.id
});
You can navigate to this using this ui-sref syntax :
ui-sref="/getone({id:myelementid})"
Currently working on an exemple in plunker.
Hope it helped.
EDIT : Here is a clean "How to do"
See it in this plunker
My states definition
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/datalist');
$stateProvider
.state('datalist', {
url: '/datalist',
templateUrl: 'data.html',
controller: 'DataCtrl',
})
.state('datadetail', {
url: '/datadetail/:id',
templateUrl: 'detail.html',
controller: 'DetailCtrl',
})
});
My controllers :
app.controller('DataCtrl', function($scope, $http){
$http.get("all.json").success(function(datas){
$scope.datas = datas;
})
});
app.controller('DetailCtrl', function($scope, $http, $stateParams){
$http.get($stateParams.id+".json").success(function(data){
$scope.data = data;
})
});
And finally the data template :
<div>Welcome to my awesome data list</div><br/>
<div ng-repeat="data in datas">
<div>
Data Id : {{data.id}}
</div>
<div>
Data name : {{data.name}}
</div>
<button ui-sref="datadetail({id:data.id})">See details of {{data.name}}</button>
</div>
I prefer a lot to not use a "/" in the state name till the state name is a technical name and will no be displayed.
If you have some trouble try to recreate your states, steps by steps.
EDIT 2 : How to match the question behavior
See it on this plunker
Here is how it would work with your "select" a row on a click.
Since you can refer to your "current" object of a "ng-repeat= data in datas" as "data". You are able to pass it to a function like this :
ng-repeat="data in datas" ng-click="select(data)"
The function simply affect this object to a var that represent the currently selected object :
$scope.select = function(data){
$scope.selectedData = data;
};
Now you button will take the information about "selectedData"
<button ui-sref="datadetail({id:selectedData.id})" ng-disabled="!selectedData">
See details of {{selectedData.name}}
</button>
And ... that's pretty much all. If you have the two states defined on my first exemple you will exactly have what you want.