When Panel header is clicked, I want to update the respective Panel body with the corresponding data. In my Angular code on Plunker, clicking "Test1" should only update "Test1detail" in the body.
Here's the code snippet from my Plunkr:
angular.module('myapp',[])
.controller('maincontroller',function($scope,myservice){
var headings=['Test1','Test2','Test3']
$scope.mainHeadings=headings
$scope.GetDetail = function(header)
{
$scope.headerdetail = myservice.GetDetails(header);
}
})
angular.module('myapp')
.service('myservice',function()
{
var test1='test1 detail';
var test2='test2 detail';
var test3='test3 detail';
var Details = function(det)
{
if (det=='Test1')
return test1
else if (det=='Test2')
return test2
if (det=='Test3')
return test3
}
return {
GetDetails: Details
}
})