AngularJS +HTML Demo
<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的更多相关文章
- AngularJS入门-demo
双向绑定测试: <body ng-app> 请输入姓名:<input ng-model="myname"> <br> {{myname}},你好 ...
- AngularJS入门Demo
1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...
- AngularJs Test demo &front end MVVM implementation conjecture and argue.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- angularjs transclude demo
<!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...
- angularjs ngRoute demo
<!doctype html> <html lang="en" ng-app="AMail"> <head> <met ...
- angularjs $watch demo
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UT ...
- AngularJS 下拉列表demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- AngularJS 中文资料+工具+库+Demo 大搜集
中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的 ...
- Angular2 Hello World 之 RC6
angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.code ...
随机推荐
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- Atitit.日志系统slf4j的使用
Atitit.日志系统slf4j的使用 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar ...
- Kotlin开发语言文档（官方文档）-- 目录
开始阅读Kotlin官方文档.先上文档目录.有些内容还未阅读,有些目录标目翻译还需琢磨琢磨.后续再将具体内容的链接逐步加上. 文档链接:https://kotlinlang.org/docs/kotl ...
- iOS开发--弹窗多选、单选框架
最近刚毕业...因为个毕设,都离职了又得重新找工作了,这是之前自己没事开直播写的一个小框架,后来各种趋于稳定后,简单的封装了下,写了个小demo,这里就不废话了,直接贴地址,也不编辑了,自己复制过去看 ...
- win 10 安装软件 报错发布者不受信任
1:打开任务管理器, [运行新任务] 2:(勾上以系统管理员权限创建此任务) 输入 cmd 3:进入要安装的软件所在的目录:cd D:\111_安装包\submit 3 (本文以安装submit 为 ...
- 使用 Json.Net 对Json文本进行 增删改查
JSON 已经成为当前主流交互格式, 如何在C#中使用 Json.Net 对Json文本进行 增删改查呢?见如下代码 #region Create (从零创建) public static strin ...
- MySQL 导出数据
MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中我们将数据表 cnbl ...
- Linux下的TeXlive 2015 中文问题
Update: 今日突然发现,我的xeLaTeX编译生成的pdf中文字在TeXMaker内置viewer.evince下查看均无法显示中文,中文字显示为空白,英语正常:但FireFox.Chrome浏 ...
- splay最终模板
来自wjmzbmr的splay模板 #include<cstdio> #include<iostream> #include<algorithm> using na ...