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. ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...

  2. 45、concurrent.futures模块与协程

    concurrent.futures  —Launching parallel tasks    concurrent.futures模块同时提供了进程池和线程池,它是将来的使用趋势,同样我们之前学习 ...

  3. 史上最全前端面试题(含答案)-A篇

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  4. python的multiprocessing模块进程创建、资源回收-Process,Pool

    python的multiprocessing有两种创建进程的方式,每种创建方式和进程资源的回收都不太相同,下面分别针对Process,Pool及系统自带的fork三种进程分析. 1.方式一:fork( ...

  5. firebird常用语句

    分页写法小例 SELECT FIRST templateid,code,name FROM template ; SELECT FIRST SKIP templateid,code,name FROM ...

  6. 使用DOM解析XML文件，、读取xml文件、保存xml、增加节点、修改节点属性、删除节点

    使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...

  7. 算法学习：Pac-Man的简单对抗

    Pacman项目是加州大学伯克利分校提供的一个可视化的AI学习平台.其主体利用python完成.该项目提供了丰富的说明文档,以及预先实现了一些简单的算法供参考各接口的使用. http://ai.ber ...

  8. 交换机的Ethernet Channel

    端口聚合也叫做以太通道(ethernet channel),主要用于交换机之间连接.由于两个交换机之间有多条冗余链路的时候,STP会将其中的几条链路关闭,只保留一条,这样可以避免二层的环 路产生.但是 ...

  9. (转)C语言malloc()与free()的使用

    如何使用 malloc 函数 本文为转载内容,原文地址请点击 不要莫名其妙,其实上面这段小小的对话,就是malloc的使用过程.malloc是一个函数,专门用来从堆上分配内存.使用malloc函数需要 ...

  10. java中覆盖必须满足的约束

    子类方法的名称,参数何返回类型必须与父类一致. 子类方法不能缩小父类方法的访问权限 子类方法不能抛出比父类方法更多的异常 方法覆盖只存在于子类和父类,同一个类中方法只能被重载 父类的静态方法不能被子类 ...