AngularJS实现标签页的两种方式

前端之家收集整理的这篇文章主要介绍了AngularJS实现标签页的两种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

说明

这里演示的是直接通过bootstrap实现的方法
还可以通过angular-bootstrap的tabset指令实现,参见

'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;
}

<div ng-controller="directiveControl">

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

总结

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

原文链接:https://www.f2er.com/js/46058.html

猜你在找的JavaScript相关文章