<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. 批量处理sql 数据存入xml类型列

    个人记录 需求:当表T1 ItemCode和表T2 ItemName的数据相等时,将表T2所对应的ID和ItemName列的数据分别存入表T1 CAOZUO字段的id元素和text元素的文本中. 下面 ...

  2. js通过循环多张图片实现动画效果

    以小鱼摇尾巴和眨眼睛为例 动画思路: 1.将图片资源放在数组里面 2.通过计时器来设定间隔时间 3.通过计数器来取相应的图片 第一步:基本框架,鱼身体 <body> <canvas ...

  3. HTML的doctype和编码

    DOCTYPE Doctype是为了告诉浏览器用哪种版本的html去解析指令,必须位于第一行,在某些版本中需要引入DTD,html5无需引入DTD 中文乱码 原因 浏览器解析代码的编码格式与源代码编码 ...

  4. [转]ASP.NET应用程序生命周期趣谈(五) IIS7瞎说

    Ps:建议初学者在阅读本文之前,先简要了解一下之前的几篇文章,以便于熟悉本文提到的一些关于IIS6的内容,方便理解.仅供参考. PS:为什么叫瞎说呢?我觉得自己理解的并不到位,只能是作为一个传声筒,希 ...

  5. Looper.prepare()和Looper.loop()

    什么时候需要 Looper Looper用于封装了android线程中的消息循环,默认情况下一个线程是不存在消息循环(message loop)的,需要调用Looper.prepare()来给线程创建 ...

  6. 【Swift】iOS UICollectionView 计算 Cell 大小的陷阱

    前言 API 不熟悉导致的问题,想当然的去理解果然会出问题,这里记录一下 UICollectionView 使用问题. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cn ...

  7. SQL Server数据库性能优化技巧

    查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引: 2.I/O吞吐量小,形成了瓶颈效应: 3.内存不足: 4.网络速度慢: 5.查询出的数据量过大: 6.锁或者死锁: 7.返回了不必 ...

  8. Windows Git安装指南

    步骤如下: 1.资源下载 :Git-1.9.4-preview20140815.exe http://code.google.com/p/tortoisegit/downloads/list 2.安装 ...

  9. Unity性能优化（1）-官方教程The Profiler window翻译

    本文是Unity官方教程,性能优化系列的第一篇<The Profiler window>的简单翻译. 相关文章: Unity性能优化(1)-官方教程The Profiler window翻 ...

  10. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...