2014-10-17 3 views
0

동적으로 생성 된 탭의 활성 상태를 변경하려고합니다. 어떤 값을 선택 하느냐에 따라 어느 뷰를 볼 것인지 결정하고 $ 위치를 변경합니다. 이 코드는 동적으로 생성 된 탭의 상태를 변경할 수 없습니다. 내가 뭘 잘못하고 있는지에 대한 몇 가지 지침이 필요합니다. 다음은 당신에게 감사 내 코드 스 니펫됩니다ng-class의 동적 탭

HTML

<ul id="tabBarList"> 
     <li ng-class="{active: isActive('/list')}" ng-model="all"><a href="#/list"  id="newRequest" >All Requests</a></li> 
     <li ng-class="{active: isActive()}" ng-click="getDetails(tabs.name, post.status)" ng-repeat="tabs in tabList"><a href="" id="idNumber"># {{tabs.name}}</a><a href="" id="exitTab" ng-click="selectTab(tabs.name)" >x</a></li> 
    </ul> 


     <tr ng-repeat="post in posts"> 
     <td id="ticketId"><a id="listlink" href="" ng-click="addTab(post.ticketId, post.status)">{{post.ticketId}}</a></td> 
     </tr> 

컨트롤러

$scope.isActive = function(path) { 
      if($location.path() == path){ 
       return true 
      } else { 
       return false 
      } 
}; 

기능 {생성 탭의

$ scope.getResults = 기능 (상태) 위치를 얻을 수 있습니다

if(status == "Closed"){ 
    var path = "/list/closed"; 
    $location.path(path); 

    $scope.getActive($location.path()); 

    } 

    if(status == "Active"){ 

    } 
} 

$ scope.tabList = []; $ scope.addTab = 기능 (TICKETID) {

  $scope.tabList.push({'name': ticketId }); 

     }; 
+0

같은 변화를주세요 각도 - ui, 그것은 이미 당신이 찾고있는 기능을 가지고 – harishr

답변

0

jsFiddle

을 확인하고에서 탭 지시어를 사용할 수 없습니다

<ul id="tabBarList"> <li ng-class="{active: isActive('list')}" ng-model="all"><a href="#/list" id="newRequest" >All Requests</a></li> <li ng-class="{active: isActive(tabs.name)}" ng-click="getDetails(tabs.name, post.status)" ng-repeat="tabs in tabList"><a href="#/{{tabs.name}}" id="idNumber"># {{tabs.name}}</a><a href="" id="exitTab" ng-click="selectTab(tabs.name)" >x</a></li> </ul>

$scope.isActive = function(path) { if($location.path() == '/'+path){ return true; } else { return false; } };

+0

귀하의 솔루션이 효과가 우수, 그냥 템플릿 HTML을 사용하여 사이드 노트와 나는 모든 탭 목록에서 내 HTML 템플릿을 일관되게 만들어야했다. – azpezhed