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. php Yii2图片的url自动加localhost

    解决方法:在地址前加http://,这样url就是绝对地址,不加的话是相对地址,游览器会自动转换,即加localhost

  2. python使用环境的设置

    virtualenv usage mkidr ~/pyenv cd ~/pyenv virtualenv pycaffe #it will setup a new python environtmen ...

  3. 转每天一个linux命令（3）：pwd命令

    Linux中用 pwd 命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文 ...

  4. python pip升级失败

    接上篇,使用命令:python -m pip install --upgrade pip 发现pip升级时报错,无法升级 解决方法: 1.使用如下命令,查看具体失败原因: pip install -- ...

  5. [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

    所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...

  6. java中的ArrayList 使得集合中的对象不重复

    JAVA中的List接口存放的元素是可以重复的,在这个我重写对象里面的equals()方法,让集合里存放的对象不能重复 首先建一个类,在里面的main()方法中实现 list1中存放的是可以重复对象的 ...

  7. eclipse没有联想功能的解决办法

    1.我window->Preferences->Java->Editor->content assist 把 Enable auto activation 选项打上勾 :(如下 ...

  8. C语言中无符号数和有符号数之间的运算

    C语言中无符号数和有符号数之间的运算 C语言中有符号数和无符号数进行运算(包括逻辑运算和算术运算)默认会将有符号数看成无符号数进行运算,其中算术运算默认返回无符号数,逻辑运算当然是返回0或1了. un ...

  9. 学习之-ASP.NET MVC Filter

    MVC Filter 是典型的AOP应用,对MVC框架处理客户端请求注入额外的一些逻辑,如日志记录.缓存处理.异常处理和权限验证,性能检测(横切关注点),而这些逻辑通常与主要业务无关,被独立分开作为公 ...

  10. 如何实现一个 Virtual DOM 及源码分析

    如何实现一个 Virtual DOM 及源码分析 Virtual DOM算法 web页面有一个对应的DOM树,在传统开发页面时,每次页面需要被更新时,都需要手动操作DOM来进行更新,但是我们知道DOM ...