Javascript 更新AngularJS中的父子详细信息

当我点击面板标题时，我有面板标题和面板主体。我想用它们各自的数据更新面板主体。当我点击时，你可以检查插件 “Test1”面板标题我只想使用angular更新该主体的“Test1detail”

下面是我在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
  }

})

#1。您可以设置所有面板共享的

$scope.headerdetail

属性。而是设置当前迭代范围

headerdetail

变量：

$scope.GetDetail = function(header) {
    this.headerdetail = myservice.GetDetails(header);
}

演示：

#2。但如果将对象数组作为主要数据结构处理，效果会更好：

var headings = [{title: 'Test1'}, {title: 'Test2'}, {title: 'Test3'}];

$scope.mainHeadings = headings;

$scope.GetDetail = function(heading) {
    heading.headerdetail = myservice.GetDetails(heading.title);
}

然后设置

标题

对象的属性：

<div class='panel panel-default' ng-repeat='heading in mainHeadings'>
    <div class='panel-heading pnlbld active' data-loaded='false' ng-click='GetDetail(heading)'>{{heading.title}}</div>
    <div class='panel-body'>
        {{heading.headerdetail}}
    </div>
</div>

{{heading.title}}
{{heading.headerdetail}

演示：