关于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部分>