ng-class的动态选项卡

时间:2014-10-17 17:32:54

标签: angularjs tabs 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 = function(status){

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

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

    }

    if( status == "Active"){

    }
}

$ scope.tabList = []; $ scope.addTab = function(ticketId){

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

        };

1 个答案:

答案 0 :(得分: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; } };