동적 데이터 소스에서 angularJS를 사용하여 특정 노드를 여는 방법

Question

에서 angularJS을 사용하여 특정 노드를 여는 방법에 대한 지원을 요청하고 싶습니다. 하위 노드를 표시하거나 숨길 수 있지만 특정 노드를 클릭하면 특정 노드 만 표시됩니다. 원인은 현재 토글 이미지를 클릭하면 모든 하위 노드를 숨기거나 표시합니다.

<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); 
    }; 

어떤 제안이 크게 감사합니다 :

내 트리거로

HTML을 <img src="#" class="sub-tree" ng-click="toggleNodes()" /> 을 사용하고 있습니다. 그것을 할 수

Answer 1

한 가지 방법은 다음과 같습니다

이 toogleMe의 나열된 각 목록에 특정/고유 한 값을 추가하고 클릭하면 있음을 켜고 끌. 뭔가 같은 : 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 : 논리를 잘 보이지만. 위의 코드는 테스트되지 않았습니다