关于angular tabs的一些操作。

标签：

实现功能：动态加载tabs的数据，若已经含有的表格，点击后高亮。

原理：将tab的数据存储在一个数组里，添加删除只需要对数据进行操作（在angularjs 中，一切都是数据）。

代码：<html部分>

<md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect >
    <md-tab ng-repeat="tab in tabs"label="{{tab.title}}">
        <md-content flex="100" style="margin: auto auto" layout="row">
            <div flex="80"></div>
            <md-button  class="md-primary md-raised" sytle="margin-left:0px" ng-click="removeTab(tab)">删除</md-button>
        </md-content>
    </md-tab>
</md-tabs>

<html部分>

md-selected是判断当前显示那个表格。

<js部分>

var check =function (tabs,a){                   //检测tabs里面是否已经包含该表格
        for (var i = 0; i <tabs.length; i++) {
            if (tabs[i].title == a.name) {
                return i;
            }
        }
    return false;
    }
    $timeout(function(){
        var a =  res.target.operate;
        var exist = false
        if(check($scope.tabs,a)){
            var num = check($scope.tabs,a);
            $scope.selectedIndex = num;
            console.log(num)
            //document.getElementById("topo").scrollTop(200);
        }
        else{
            $scope.tabs.push({title:a.name,content: a.opera});
        }

    })

$scope.removeTab=function(tab){   //删除当前的tab函数
    var index = $scope.tabs.indexOf(tab);
    $scope.tabs.splice(index,1);
    console.log($scope.tabs)
}

<js部分>

关于angular tabs的一些操作。

标签：

原文地址：http://www.cnblogs.com/dianzikeda/p/5892408.html