<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. string.empty , "" , null 以及性能的比较

    一:这种结论,个人觉得仍然存疑 http://www.cnblogs.com/wangshuai901/archive/2012/05/06/2485657.html 1.null    null 关 ...

  2. 微信小程序热点云笔记demo 开源总结

    因为公司的项目需要,我们自己开发了一个微信小程序的云笔记 开源地址 https://github.com/hotapp888/hotapp-notepad 云笔记功能特点:(1)自动微信登录(2)笔记 ...

  3. 移动端嵌入pdf.js远程请求pdf出现（206）

    最近在做移动端的开发,需要嵌入pdf进行预览.看了很多的js组件后选择了pdf.js:使用起来还是比较方便的,至于使用网上有很多的教程. 但在使用过程中出现了如下一个问题(我做的是IOS系统): 问题 ...

  4. android Base64 加密

    一 Base64加密 import java.io.ByteArrayOutputStream;import java.io.IOException;import java.io.OutputStre ...

  5. Appfuse：权限控制

    Appfuse的权限控制依赖于Struts的Menu机制,common下的menu.jsp是对菜单顺序的定义,详细的菜单项和菜单链接及权限再menu-config.xml中控制,如下: <Men ...

  6. Myeclipse怎么连接MySQL数据库？

    1.打开  >>  Myeclipse 2.Window  >>  Open Perspective  >>  Myeclipse Database Explore ...

  7. Oracle Partition Outer Join 稠化报表

    partition outer join实现将稀疏数据转为稠密数据,举例: with t as (select deptno, job, sum(sal) sum_sal from emp group ...

  8. MySQL解压版配置步骤

    mysql-5.7.14-winx64\bin配置到Path中 在解压路径下复制my-default.ini,修改名称为my.ini 在my.ini添加如下 [mysqld] basedir=C:\\ ...

  9. 版本控制-Git服务器搭建和常用命令使用

    Git是目前世界上最先进的分布式版本控制系统(没有之一).使用Svn的请参考<版本控制-svn服务器搭建和常用命令(centos 6.3)>,下面介绍Git的常用命令 常用命令 简单版 升 ...

  10. ascii、unicode、utf、gb等编码详解

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为"字节".再后来,他们又做了一些可以处理这 ...