首页 > 其他 > 详细

关于angular tabs的一些操作。

时间:2016-09-21 14:32:15      阅读:214      评论:0      收藏:0      [点我收藏+]

实现功能:动态加载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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!