ng-include 选取ng-template

<!DOCTYPE html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>tabs</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <style>

        .active{display:block;}

        .sec{background:red;}

        .tabpanel{display: none;}

        .head{}

        .head .tul{list-style:none;padding:0;}

        .head .tul .tli{float:left;padding:10px 20px;}

        .head .tul .tli .ta{text-decoration: none; color:#000;display:block;}

    </style>

    <script>

        angular.module('myApp',[]).controller("tabsCtrl",function($scope){

            $scope.tabs=[{head:'选项卡1',content:'list.html',active:true},{head:'选项卡2',content:'选项卡2的内容',active:false},{head:'选项卡3',content:'选项卡3的内容',active:false}];

            $scope.changeTab=function($index){

                for(var i=0;i<$scope.tabs.length;i++)

                {

                    $scope.tabs[i].active=false;

                }

                $scope.tabs[$index].active=true;

            };

            $scope.items=['hehehehe','shishi','uiuiui']

        })

    </script>

</head>

<body>

    <div ng-controller="tabsCtrl">

        <div class="head">

            <ul class="tul clearfix">

                <li class="tli" ng-repeat="tab in tabs"><a href="javascript:;" class="ta" ng-class="{sec:tab.active}" ng-click="changeTab($index)">{{tab.head}}</a></li>

            </ul>

        </div>

        <div class="tab-content">

            <div class="tabpanel" ng-repeat="tab in tabs" ng-class="{active:tab.active}" ng-include="tab.content"></div>

        </div>

    </div>

    <script type="text/ng-template" id='list.html'>

        <ul>

            <li ng-repeat="item in items">{{item}}</li>

        </ul>

    </script>

</body>

</html>

angularui 自定义选项卡的更多相关文章

  1. excel快速访问工具栏和自定义选项卡

    自定义选项卡: excel命令选项--自定义功能区--

  2. SWT自定义选项卡CTabFolder

    SWT自定义选项卡CTabFolder 学习了:http://blog.csdn.net/dreajay/article/details/17391731 package com.swt; impor ...

  3. iOS 自定义选项卡-CYLTabBarController

    正常的选项卡流程 cocoapods就不说了 创建一个CYLTabBarControllerConfig类 #import <Foundation/Foundation.h> #impor ...

  4. ViewPager自定义选项卡

    转自:http://www.open-open.com/lib/view/open1352621601262.html

  5. WPF实现选项卡效果（3）——自定义动态添加的AvalonDock选项卡内容

    原文:WPF实现选项卡效果(3)--自定义动态添加的AvalonDock选项卡内容 简介 在前面一篇文章里面,我们实现了AvalonDock选项卡的动态添加,但是对于选项卡里面的内容,我们并没有实现任 ...

  6. Fragment实现底部选项卡切换效果

    现在很多APP的样式都是底部选项卡做为首页的,实现这样的效果,我们一般有这样几种方式,第一,最屌丝的做法,我直接自定义选项卡视图,通过监听选项卡视图,逻辑控制内容页的切换,这样做的想法一般是反正这几个 ...

  7. 自定义和扩展 SharePoint 2010 Server 功能区

    了解构成 SharePoint 2010 服务器功能区的组件以及如何通过演练两个功能区自定义项方案来自定义功能区. 适用范围: Microsoft SharePoint Foundation 2010 ...

  8. VSTO之旅系列(三)：自定义Excel UI

    原文:VSTO之旅系列(三):自定义Excel UI 本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创 ...

  9. VSTO学习(四)——自定义Excel UI 转载

    本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创建Excel的解决方案,相信大家通过从上面一个专题之后 ...

随机推荐

  1. Python网络爬虫与信息提取（一）

    学习 北京理工大学 嵩天 课程笔记 课程体系结构: 1.Requests框架:自动爬取HTML页面与自动网络请求提交 2.robots.txt:网络爬虫排除标准 3.BeautifulSoup框架:解 ...

  2. jumpserver V0.4.0 在CentOs7上的安装

    基于 CentOS 7 一步一步安装 Jumpserver 0.4.0 环境 系统: CentOS 7 IP: 192.168.226.128 一. 准备Python3和Python虚拟环境 1.1 ...

  3. QQ推广神器：批量加群、好友、群发。支持批量搜索关键词加群分享下载

    V2.1版本更新说明: 1.新增邮箱导出功能 2.新增一键添加关键词查询结果所有群 3.新增好友验证数学自动计算 4.新增好友验证答案判断 ------------------------------ ...

  4. Java入门（4）——常见的String方法

    考虑到API当中的解释,新手可能有点看不懂(我刚开始就是不太看得懂).最好的学习方法当然是是自己一个一个去试一遍,然后就可以加深印象. 然后, 这是我当初学习的时候用自己的大白话做的笔记.现在查阅的话 ...

  5. Jquery笔记之第二天

    Jquery笔记之第二天 jQuery - 获取内容和属性 获得内容 - text().html() 以及 val() <script> $(document).ready(functio ...

  6. java基础部分细节

    访问控制修饰符 Java中,可以使用访问控制符来保护对类.变量.方法和构造方法的访问.Java支持4种不同的访问权限. 默认的,也称为 default,在同一包内可见,不使用任何修饰符. 私有的,以  ...

  7. Python之set

    set set集合,是一个无序且不重复的元素集合 set的优势 set 的访问数度快 set 原生解决数据重复问题 # 数据库中原有 old_dict = { "#1":{ 'ho ...

  8. django模板（过滤器）

    -------------------django内建的过滤器-------------------1.add 使用形式为:{{ value | add: "2"}} 意义:将va ...

  9. zbrush曲面增加厚度

    把曲面增加厚度方便雕刻机雕刻. 可以使用zbrush中的边循环功能. 1.准备好需要增加厚度的曲面,把曲面的边缘调整好,尽量的变得平滑. 2.将模型导入到zbrush中,开启双面显示,以方便观察模型的 ...

  10. Info模式下的隐形杀手(SpringMVC同时使用<mvc:resources.../>和FormattingConversionServiceFactoryBean时出现的问题)

    天气一天比一天变的凉快了,而我一天天踩的坑更加贱了,首先在北京向各位问好,也给身边献身教育事业的亲朋好友们补上一句节日快乐! 今天早上手贱把项目误删了,不得不去SVN上去乞求了.我个人习惯项目运行的时 ...