AngularJS多个动态指令绑定

我是AngularJS的新手，我太愚蠢了，无法完成这项工作。AngularJS多个动态指令绑定

我试图产生

面板（动态）
当我点击面板标题，面板主体将扩大清单/折叠
当特定面板体崩塌，我想创建一个表和一些数据绑定到它

这里是我的代码

<script> 
    var app = angular.module('TestApp', []); 
    app.controller('TestCtrl', function ($scope) { 
     $scope.parents = [ 
      { id: '1', name: 'Test Parent 1', count: '2' }, 
      { id: '2', name: 'Test Parent 2', count: '3' }, 
      { id: '3', name: 'Test Parent 3', count: '1' } 
     ]; 

     $scope.parent_click = function (parent) { 
      var children_list = [ 
      { id: '1', parent_id: '1', name: 'Test Child 1' }, 
      { id: '2', parent_id: '1', name: 'Test Child 2' }, 
      { id: '3', parent_id: '2', name: 'Test Child 3' }, 
      { id: '4', parent_id: '2', name: 'Test Child 4' }, 
      { id: '5', parent_id: '2', name: 'Test Child 5' }, 
      { id: '6', parent_id: '3', name: 'Test Child 6' } 
      ]; 
      var directive_name = 'clschild_' + parent.id; 
      app.directive(directive_name, function() { 
       var child_html = '<div class="panel-body"> \ 
        <table ng-attr-id="tblchild_'+ parent.id + '" class="table table-hover"> \ 
         <thead> \ 
          <tr> \ 
           <td>Name</td> \ 
          </tr> \ 
         </thead> \ 
         <tbody> \ 
          <tr ng-repeat="child in children"> \ 
           <td>{{child.name}}</td> \ 
          </tr> \ 
         </tbody> \ 
        </table> \ 
       </div>'; 
       return { 
        template: child_html, 
        link: function (scope) { 
         scope.$apply(function() { scope.children = children_list; }); 
        } 
       } 
      }); 
     }; 
    }); 

</script> 
<div ng-app="TestApp" ng-controller="TestCtrl"> 
    <div class="panel panel-default" ng-repeat="parent in parents"> 
     <div class="panel-heading clearfix"> 
      <a id="testtest" data-toggle="collapse" ng-href="#divchild_{{parent.id}}" ng-click="parent_click(parent);" class="pull-left" style="padding-top: 7.5px;">{{parent.name}}</a> 
     </div> 
     <div ng-attr-id="divchild_{{parent.id}}" class="panel-collapse collapse"> 
      <div class="clschild_{{parent.id}}"> 
       <div class="panel-body"> 
        aaa 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

我想将数据绑定到相应父项的面板主体。我怎样才能做到这一点？

编辑：问题 - 现在，当我单击面板标题时，面板主体展开，但只显示“aaa”。我无法获得绑定到面板主体的子列表。

感谢

来源

2016-01-09 Ho Chia Leung

认为你好，我已经编辑我的问题。没有我的切换不起作用数据和模板没有绑定到面板主体。 –

你不能像这样在控制器内部创建指令。 –

你好，还有其他方法可以实现吗？谢谢：） –

这样的方法可以在这里追踪点击父ID，并通过传递点击父ID在ng-repeat过滤儿童名单。

$scope.clicked_parent = 0; 
    $scope.parents = [ 
     { id: '1', name: 'Test Parent 1', count: '2' }, 
     { id: '2', name: 'Test Parent 2', count: '3' }, 
     { id: '3', name: 'Test Parent 3', count: '1' } 
    ]; 

    $scope.children_list = [ 
     { id: '1', parent_id: '1', name: 'Test Child 1' }, 
     { id: '2', parent_id: '1', name: 'Test Child 2' }, 
     { id: '3', parent_id: '2', name: 'Test Child 3' }, 
     { id: '4', parent_id: '2', name: 'Test Child 4' }, 
     { id: '5', parent_id: '2', name: 'Test Child 5' }, 
     { id: '6', parent_id: '3', name: 'Test Child 6' } 
    ]; 

    $scope.isParentTagClicked = false; 
    $scope.set_parent_id = function(_id){ 
     $scope.isParentTagClicked = !$scope.isParentTagClicked; 
     if ($scope.isParentTagClicked){ 
     $scope.clicked_parent = _id; 
     }else{ 
     $scope.clicked_parent  = 0; 
     } 
    };

，并宣布像

<div class="panel panel-default" ng-repeat="parent in parents"> 
     <div class="panel-heading" ng-click="set_parent_id(parent.id)">{{parent.name}}</div> 
     <div class="panel-body" ng-repeat="child in children_list" ng-show="child.parent_id == clicked_parent" ng-if="child.parent_id == parent.id"> 
      {{child.name}} 
</div> 
</div>

来源

2016-01-14 10:40:12

AngularJS多个动态指令绑定

回答

相关问题