<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. Android Weekly Notes Issue #221

    Android Weekly Issue #221 September 4th, 2016 Android Weekly Issue #221 ARTICLES & TUTORIALS And ...

  2. Appfuse：扩展自己的GenericManager

    通过代码生成机制的appfuse访问数据都通过GenericManager来实现,GenericManager默认提供了以下几个方法: package org.appfuse.service; imp ...

  3. Java中一些常用的方法

    1.计算程序运行时常 long start = System.currentTimeMillis(); … … … long end = System.currentTimeMillis(); Sys ...

  4. MongoDB学习笔记系列

    回到占占推荐博客索引 该来的总会来的,Ef,Redis,MVC甚至Sqlserver都有了自己的系列,MongoDB没有理由不去整理一下,这个系列都是平时在项目开发时总结出来的,希望可以为各位一些帮助 ...

  5. phpStudy2016 配置多个域名期间遇到的问题

    第一步 在C:\Windows\System32\drivers\etc下的hosts文件下添加   第二步   找到Apache 下的httpd.conf  文件 打开,去掉171行前边的#   第 ...

  6. 2-部署phpmyadmin

    软件下载地址:https://files.phpmyadmin.net/phpMyAdmin/4.5.5.1/phpMyAdmin-4.5.5.1-all-languages.zip 解压软件 [ro ...

  7. Vuforia Android 6 Camera Error

    环境 引擎: Unity 5.3.6f1 SDK: Vuforia 6.0.112 测试系统:Android 4.2/4.3 6.0 Android 6出错 在Android 6下Vuforia打印的 ...

  8. java jdbc的优化之BeanUtils组件

    1. BeanUtils组件 1.1 简介 程序中对javabean的操作很频繁, 所以apache提供了一套开源的api,方便对javabean的操作!即BeanUtils组件. BeanUtils ...

  9. Weekly Traning Farm 16

    先安利一下这套比赛,大概是doreamon搞的,每周五晚上有一场,虽然没人做题目质量挺高的 http://codeforces.com/group/gRkn7bDfsN/contests(报名前要先报 ...

  10. java socket收发http协议内容

    来自:https://www.oschina.net/code/snippet_2009881_48232 import java.io.BufferedReader; import java.io. ...