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. Brackets 1.8 开源+免费的Web前端网页文本编辑工具

    Brackets 1.8 开源+免费的Web网页文本编辑工具   -------------->> ---------------------- A modern, open source ...

  2. Springboot+resteasy定时任务

    定时任务 需求:按每日统计点赞数.评论数.热度的增加量(不是现有量) 1.每天零点执行:首先遍历出user的统计字段 然后插入到新创建的表中. 2.每天一点执行:根据时间段将两表的数据相减创建增量字段 ...

  3. Linux常见命令（五）——rmdir

      前  言 JRedu 今天我们来介绍第五个命令:rmdir . 命令英文原意:remove empty directories 命令用途: rmdir:删除空目录,非空的目录不能删除 本章内容将详 ...

  4. Junit4的最简单例子

    首先是JUnit的百度百科介绍: 接下来是JUnit4的最简单例子,使用的开发软件为Eclispe(里面集成了JUnit): 1.建立一个java project: 2.建立一个java class: ...

  5. We’re Just Beginning

    "We are reading the first verse of the first chapter of a book whose pages are infinite…" ...

  6. 端午总结-有关Mysql的base

    前言 目前软件需要加一种数据源mysql,我也是差不多看了mysql挺久的了,把一些心得写下来,方便以后总结. 大体上包括 mysql5.5,5.6,5.7安装的一些不同,支持的windows平台测试 ...

  7. C#设计模式(4)-抽象工厂模式

    引言 上一篇介绍了设计模式中的简单工厂模式-C#设计模式(3)-工厂方法模式,本篇将介绍抽象工厂模式: 抽象工厂模式简介 抽象工厂模式(AbstractFactory):提供一个创建一系列相关或相互依 ...

  8. Http和Socket详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp59   这不是同一层的协议 socket是一个针对TCP和UDP编程的借 ...

  9. linux下使用gcc编译运行C程序

    gcc(GNU Compiler Collection)是Linux下最常用的C语言编译器,是GNU项目中符合ANSI C标准的编译系统,能够编译用C.C++和Object C等语言编写的程序.  在 ...

  10. 美国站群服务器有利于SEO优化

    美国服务器对于站群来说就是指站长为提升每个网站对搜索引擎的权重,更好的有利于seo优化,单独为该服务器下的多个网站分别配置不同的独立ip. 实际上,站群服务器跟其他服务器并没有多大差异,唯一的区别就是 ...