動的データソースからangularJSを使用して特定のノードを開く方法

Question

からangularJSを使用して特定のノードを開く方法の助けを求めます。私はサブノードをトグル（表示/非表示）することができますが、次に実行したいのは、特定のノードをクリックすると、特定のノードのみが表示されます。現時点では、トグルイメージをクリックすると、すべてのサブノードを表示/非表示にします。私は私のトリガー

HTMLとして<img src="#" class="sub-tree" ng-click="toggleNodes()" /> を使用してい

：

<li ng-repeat="node in (currentDraft.OrgChartData.SearchList | filter: searchText)" > 
    <div class="staff-officer" ui-tree-node 
     data-type="staff" 
     ui-tree-handle> 
     <img ng-src="{{userImage(staff.StaffNumber)}}" class="staff-img img-responsive img-circle" /> 
     <p class="staff-name" style=""> 
      {{node.StaffName}} 
     </p> 
     <img src="#" class="sub-tree" ng-click="toggleNodes()" /> 
    </div> 


    <ul ui-tree-nodes 
     data-type="position" 
     drag-enabled="false" 
     ng-model="node.Positions" 
     ng-show="!node.collapsed && node.Positions != null && node.Positions.length > 0" 
     class="second-level"> 
     <li ui-tree-node 
      data-type="position" 
      data-drag-delay="300" 
      data-collapsed="true" 
      ui-tree-handle 
      ng-repeat="node in (node.Positions | filter: searchText)"> 
      <span class="staff-position"> 
       {{node.PositionDescription}} 
      </span> 
      <div style="height:2px;"></div> 
      <ul ui-tree-nodes ng-model="node.nodes" 
       data-type="position" 
       ng-show=" node.nodes != null && node.nodes.length > 0" 
       class="third-level"> 
       <li ui-tree-node 
        ng-repeat="node in node.nodes" 
        data-collapsed="true" 
        data-can-drag="false" 
        ng-show="toggleMe" 
        ng-include="'new_node_position.html'" 
        data-type="position"> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 

JSコード

$scope.toggleMe = true; 

    $scope.toggleNodes = function() { 
     $scope.toggleMe = !$scope.toggleMe; 
     //console.log($scope.toggleMe); 
    }; 

任意の提案を大幅に理解されるであろう。それを行うには

Answer 1

一つの方法は、次のようになります。

がクリックされていることtoogleMeとtoogleの列挙された各リストに固有/独自の値を追加します。以下のような何か：JSで今

//adding indexHere which would be unique 
<li ng-repeat="node in (currentDraft.OrgChartData.SearchList | filter: searchText) track by $index" > 
.....//yourcode 
//passing that index when onclicked 
     <img src="#" class="sub-tree" ng-click="toggleNodes($index)" /> 
...//your code 
//here concat that uinqueID 
ng-show="toggleMe{{$index}}" 

：

$scope.toggleMe = true; 

    $scope.toggleNodes = function (uniqueVal) { 
     $scope.uniqueVal= !$scope.uniqueVal; 
     //console.log($scope.toggleMe); 
    }; 

PS：ロジックは、右のようだけど。上記のコードはテストされていません