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 ...
随机推荐
- java script第一篇（按钮全选的实现）
今天刚学了java script,记录下学习新知识的点滴.以下是操作步骤.鉴于我是初级者,如有错误,恳请读者指正.万分谢谢. 1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在 ...
- 商业智能BI推动制造业智能化转型
制造业是我国国民经济的支柱产业,是我国经济增长的主导部门和经济转型的基础,如今我国制造业面临技术工艺不精.缺乏市场意识.商贸流通环节多.物流成本大.仓储效率低下等问题,正处在转型的特殊时期. 内忧: ...
- TileJSON
TileJSON TileJSON is an open standard for representing map metadata. License The text of this specif ...
- HTML5-电影影评网
学习完了HTML5的新标签,然后结合之前的案例做了第一个小案例.自我感觉良好.下面我来展示一下图片 这是我浏览其他网站的时候以为发现的新功能可以运行代码,这是运行之后截得图片.自我感觉照片还是蛮高大上 ...
- centos 6 YUM安装 lmp
准备篇: 1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables -A INPUT -m state --state NEW -m t ...
- mysql select日期格式
mysql表中datatime类型存储为2016-01-10,C#直接select 后,在datatable里面看,变成01/10/2016,需要还原回去,使用select DATE_FORMAT(列 ...
- SQL语句中的where 1=1 和0=1
摘自:http://blog.sina.com.cn/s/blog_afe616ab0101camd.html SQL where 1=1 和0=1的作用 where 1=1; 这个条件始终为True ...
- easyui表格的增删改查
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Spring MVC之@RequestParam @RequestBody @RequestHeader 等详解
(转自:http://blog.csdn.net/walkerjong/article/details/7946109#) 引言: 接上一篇文章,对@RequestMapping进行地址映射讲解之后, ...
- [No000097]程序员面试题集【下】
1.下面中共包含()个正方形?40 计算规律,设大长方形长是5,宽是4,小正方形边长是1,那么图中.小正方形的个数是,4*5个,边长是2的正方形的个数是3*4个,边长是3的正方形的个数是2*3个,边长 ...