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多個動態指令綁定

回答

相關問題