Question

当我单击Panel标题时，我有Panel标题和Panel body我想要用它们各自的数据更新该面板主体。当我点击时你可以检查plunker “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
  }

})

Answer 1

<强>＃1 即可。您设置了所有面板共享的$scope.headerdetail属性。相反，你设置当前迭代范围headerdetail变量：

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

演示： http://plnkr.co/edit/pzx1G2PjZrdazH8E5OnQ?p=preview

<强>＃2 即可。但如果您将对象数组作为主要数据结构处理，那就更好了：

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

$scope.mainHeadings = headings;

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

然后你要设置heading对象的属性：

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

演示： http://plnkr.co/edit/zxB6LUoEarqmNJYy0ihk?p=info

更新AngularJS中的父子详细信息

1 个答案: