<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <meta name="MobileOptimized" content="240">

     <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">

     <title>首页</title>

     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

     <link href="css/common.css" rel="stylesheet" type="text/css">

     <link href="css/tbtouch.css" rel="stylesheet" type="text/css">

     <link href="css/css.css" rel="stylesheet" type="text/css">

 </head>

 <body>

     <div ng-app="myApp" ng-controller="formCtrl">

         <div class="xttblog">

             <div style="background:url('img/head.png'); width:100%;height:32px;"></div>

             <ul class="topbox">

                 <li ng-repeat="x in names">

                     <a href="javascript:;" ng-click="save()">

                         <img src="img/top.png" class="img70" /><br />{{ x.name }}

                     </a>

                 </li>

             </ul>

         </div>

         <br />

         <ul>

             <li ng-repeat="x in items">

                 <div class="tit_tj">{{ x.name }}</div>

                 <ul class="tjlist">

                     <li ng-repeat="y in  x.item">

                         <a href="javascript:;" ng-click="save()">

                             <img class="img76" src="img/item.png" width="70" height="70"><strong>{{ y.name }}</strong><p>{{ y.details }}</p>

                             <div class="jiantou"></div>

                         </a>

                     </li>

                 </ul>

             </li>

         </ul>

         <div ng-app="myApp" class="hovertreebottom">

             <nav>

                 <div id="hovertreebottom_ul">

                     <ul class="box">

                         <li ng-repeat="x in items3">

                             <a href="javascript:;" ng-click="save()"><img src="img/btn.png" /><br /><span>{{ x.name }}</span></a>

                         </li>

                     </ul>

                 </div>

             </nav>

         </div>

     </div>

 <script>

         var app = angular.module('myApp', []);

         app.controller('formCtrl', function ($scope) {

             $scope.names = [

                 { name: '业绩报表' },

                 { name: '账户报表' },

                 { name: '代理报表' }];

             $scope.items = [

                 {

                     name: '账户',

                     item: [

                         { name: '申请记录', details: '查询账户' },

                         { name: '出入金查询', details: '查询账户历史出入金' }

                     ]

                 },

                 {

                     name: '出入金',

                     item: [

                         { name: '申请记录', details: '查询账户出入金的处理结果' },

                         { name: '账户详情', details: '查询账户详细信息' }

                     ]

                 }

             ];

             $scope.items3 = [

                 { name: '销售' },

                 { name: '交易' },

                 { name: '人事' },

                 { name: '分析' },

                 { name: '我' }];

             $scope.save = function () {

                 alert("温馨提示  尚无测试权限，等待开放");

             };

         });

     </script>

 </body>

 </html>

Demo下载 密码:87zl

AngularJS +HTML Demo的更多相关文章

  1. AngularJS入门-demo

    双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...

  2. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  3. AngularJs Test demo &front end MVVM implementation conjecture and argue.

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  4. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  5. angularjs ngRoute demo

    <!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...

  6. angularjs $watch demo

    <!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...

  7. AngularJS 下拉列表demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  8. AngularJS 中文资料+工具+库+Demo 大搜集

    中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的 ...

  9. Angular2 Hello World 之 RC6

    angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.code ...

随机推荐

  1. 我的屌丝giser成长记-研一篇（下）

    研一生活的下学期开始,课程就比较少了,加上选修课,4门课而已,总体还是比较轻松的,让我有更过充裕时间来做自己的事情以及导师的项目.开始导师的一个新的webgis开发项目,叫做三峡库区事故型水环境污染风 ...

  2. Oracle Sales Cloud：报告和分析（BIEE）小细节1——创建双提示并建立关联（例如，部门和子部门提示）

    Oracle Sales Cloud(Oracle 销售云)是一套基于Oracle云端的客户商机管理系统,通过提供丰富的功能来帮助提高销售效率,更好地去了解客户,发现和追踪商机,为最终的销售成交 (d ...

  3. javaScript对象－基本包装类型的详解

    本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...

  4. uploadify插件Http Error（302）错误记录（MVC）

    由于项目(asp.net MVC)需要做一个附件上传的功能,使用的是jQuery的Uploadify插件的2.1.0版本,上传文件到自己项目指定的文件夹下面.做完之后,在谷歌上测试是正确的,在火狐上报 ...

  5. RHEL6.3系统安装

      进入安装界面   这里选择跳过   点击下一步   选择安装语言     选择键盘   选择系统储存方式   选择是否格式化储存设备     给安装的系统一个计算机名     选择时区   给ro ...

  6. Arduino舵机控制

    普通舵机有3根线:GND(黑).VCC(红).Signal(黄) 红色的是电源正极,黑色的是电源负极,白色的是信号线.有些舵机线是红棕橘三色,分别对应红黑白. #include <Servo.h ...

  7. [转]ASP.NET Core 中的那些认证中间件及一些重要知识点

    本文转自:http://www.qingruanit.net/c_all/article_6645.html 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系 ...

  8. 【转】 XenServer架构之HA概述

    一.XenServer HA概述 XenServer HA是一套全自动功能设计,规划,安全地恢复出现问题的XenServe 主机上的虚拟机的功能组件. 启用 HA 后,XenServer 将持续监视池 ...

  9. S5PV210_时钟系统

    1.S5PV210的时钟获得:外部晶振+内部时钟发生器+内部PLL产生高频时钟+内部分频器分频 S5PV210外部有4个W晶振接口,可以根据需要来决定在哪里接晶振.接了晶振之后上电相应的模块就能产生振 ...

  10. BZOJ 2588: Spoj 10628. Count on a tree [树上主席树]

    2588: Spoj 10628. Count on a tree Time Limit: 12 Sec  Memory Limit: 128 MBSubmit: 5217  Solved: 1233 ...