AngularJS实现标签页的两种方式

一、通过普通指令实现标签页

 

 
标签1
 
标签2
 
 
 
 标签1的内容
 
 
 标签2的内容
 
 


说明
这里演示的是直接通过bootstrap实现的方法。
还可以通过angular-bootstrap的tabset指令实现，参见 官方Demo


'use strict';

angular.module('ngShowcaseApp').controller('ctrl.show.tab', function ($scope) {
 var vm = $scope.vm = {};
});


.tab-content.tab-bordered {
 border: 1px solid lightgray;
 border-top: none;
 padding: 15px;
 border-radius: 0 0 4px 4px;
}

二、自定义指令实现的标签页

 
 
 
 
 
 
 
 
 .btn-group{
  position: relative;
  left: 40px;
 }
 .list-group{
  position: relative;
  left: 0;
 }

 .list-group-item{

 }
 #list3{
  width: 200px;
 }
 



 
 
 
  
 
 
 

（1）首先要解决指令必须写在一个根标签中，一定要用div包裹
（2）指令外部传递参数要使用ng-model，来声明变量，
         在指令中用scope：{
         value:'ngModel'
         }来赋值

总结

以上就是关于AngularJS实现标签页的全部内容，希望这篇文章对大家学习或使用AngularJs能有所帮助，如果有疑问大家可以留言交流。