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. Java8 lamda表达式快速上手

    1.对比着经典foreach 简单的循环 o相当于foreach中的临时变量,要遍历的list放在句首 list.foreach(o->{你要进行的操作}); package com.compa ...

  2. 如何获取Azure Storage Blob的MD5值

    问题表述 直接使用CloudBlockBlob对象获取的Properties是空的,无法获取到对象的MD5值,后台并未进行属性值的填充 前提:blob属性本省包含md5值,某些方式上传的blob默认并 ...

  3. 官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

    给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andro ...

  4. window 使用git 非ssh key 面密码登录

    Windows下使用git bash时,总是提示输入用户名密码,严重影响了开发效率,经搜索查找找到了如下有效的解决方案,屡试不爽! 1.先创建存储用户名密码的文件 ,在home文件夹,一般是 C:\D ...

  5. C# 单例模式(Singleton Pattern)（转SuagrMatl）

    单例模式的定义: 确保一个类只有一个实例,并提供一个全局访问点. 首先实例大家应该都明白就是类生成对象的过程简单的就是String s=new String(),则s就是个实例. Q:如何只生成一个实 ...

  6. C++内存布局详解

    一个由C/C++编译的程序除了存放函数二进制代码的程序代码段(code段)外,数据占用的内存大致分为以下几个部分: 1.栈区(stack) 存放局部变量.函数参数.返回数据.返回地址等.系统自动分配释 ...

  7. Laravel学习基础篇之--路由

    终于还是决定再多学一门重量级框架,当然首选必备还是被称为最优雅的Web开发框架--Laravel 对于框架的入门,首先了解它的路由规则是先前必备的,以下是laravel 中几种常见的基础路由规则 // ...

  8. Maven 中央仓库及阿里云仓库地址

    Maven 中央仓库地址: 1. http://www.sonatype.org/nexus/ 2. http://mvnrepository.com/ 3. http://repo1.maven.o ...

  9. tomcat学习笔记

    1.安装和运行[必须] * 解压apache-tomcat-6.0.35.zip * 位置:不能包含中文和空格 * 运行: %tomcat%/bin/startup.bat * 测试 * http:/ ...

  10. 转：java获得当前文件路径

    第一种: File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); ...