<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. Linux 命令学习笔记

    文件基本操作 ls ,rm , mv , ln   ls ls [option] [files]   不带参数时,列出当前工作目录的内容 $ls   列出指定目录的内容 ls dir1 或个别文件 l ...

  2. CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用

    本文介绍Design Support Library中CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用. 先列出了Design S ...

  3. swift学习笔记4——扩展、协议

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  4. 慎用 supportedRuntime

    运行环境:win7, net4.5 现象: 无法连接SQL2012数据库,提示连接超时   原因:     真正的原因: 找微软去   解决的办法: 去除多余的supportedRuntime,或者修 ...

  5. Linux用户态和内核态

    究竟什么是用户态,什么是内核态,这两个基本概念以前一直理解得不是很清楚,根本原因个人觉得是在于因为大部分时候我们在写程序时关注的重点和着眼的角度放在了实现的功能和代码的逻辑性上,先看一个例子: 1)例 ...

  6. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  7. XSS 防御方法总结

    1. XSS攻击原理 XSS原称为CSS(Cross-Site Scripting),因为和层叠样式表(Cascading Style Sheets)重名,所以改称为XSS(X一般有未知的含义,还有扩 ...

  8. 2-sql基本操作

    sql基本操作 一．Sqlplus常用命令 1.查看oracle数据库的进程 2.查看oracle数据库运行状态 3.显示实例名(数据库名) 4.用sys账户登陆到数据库 5.解锁账户scott,并登 ...

  9. Linux之od命令详解

    功能说明:输出文件内容.语 法:od [-abcdfhilovx][-A <字码基数>][-j <字符数目>][-N <字符数目>][-s <字符串字符数&g ...

  10. 对C#泛型实例化对像

    public class A { } public class B<T> { public static T Get() { //在这一块如何实例化T这个对象呢?如果用default(T) ...