AngularJS +HTML Demo
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <meta name="MobileOptimized" content="240"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0"> 6 <title>首页</title> 7 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 8 <link href="css/common.css" rel="stylesheet" type="text/css"> 9 <link href="css/tbtouch.css" rel="stylesheet" type="text/css"> 10 <link href="css/css.css" rel="stylesheet" type="text/css"> 11 </head> 12 <body> 13 <div ng-app="myApp" ng-controller="formCtrl"> 14 <div class="xttblog"> 15 <div style="background:url('img/head.png'); width:100%;height:32px;"></div> 16 <ul class="topbox"> 17 <li ng-repeat="x in names"> 18 <a href="javascript:;" ng-click="save()"> 19 <img src="img/top.png" class="img70" /><br />{{ x.name }} 20 </a> 21 </li> 22 </ul> 23 </div> 24 <br /> 25 <ul> 26 <li ng-repeat="x in items"> 27 <div class="tit_tj">{{ x.name }}</div> 28 <ul class="tjlist"> 29 <li ng-repeat="y in x.item"> 30 <a href="javascript:;" ng-click="save()"> 31 <img class="img76" src="img/item.png" width="70" height="70"><strong>{{ y.name }}</strong><p>{{ y.details }}</p> 32 <div class="jiantou"></div> 33 </a> 34 </li> 35 </ul> 36 </li> 37 </ul> 38 <div ng-app="myApp" class="hovertreebottom"> 39 <nav> 40 <div id="hovertreebottom_ul"> 41 <ul class="box"> 42 <li ng-repeat="x in items3"> 43 <a href="javascript:;" ng-click="save()"><img src="img/btn.png" /><br /><span>{{ x.name }}</span></a> 44 </li> 45 </ul> 46 </div> 47 </nav> 48 </div> 49 </div> 50 <script> 51 var app = angular.module('myApp', []); 52 app.controller('formCtrl', function ($scope) { 53 $scope.names = [ 54 { name: '业绩报表' }, 55 { name: '账户报表' }, 56 { name: '代理报表' }]; 57 $scope.items = [ 58 { 59 name: '账户', 60 item: [ 61 { name: '申请记录', details: '查询账户' }, 62 { name: '出入金查询', details: '查询账户历史出入金' } 63 ] 64 }, 65 { 66 name: '出入金', 67 item: [ 68 { name: '申请记录', details: '查询账户出入金的处理结果' }, 69 { name: '账户详情', details: '查询账户详细信息' } 70 ] 71 } 72 ]; 73 $scope.items3 = [ 74 { name: '销售' }, 75 { name: '交易' }, 76 { name: '人事' }, 77 { name: '分析' }, 78 { name: '我' }]; 79 $scope.save = function () { 80 alert("温馨提示 尚无测试权限，等待开放"); 81 }; 82 }); 83 </script> 84 </body> 85 </html> 86 87 88
Demo下载 密码:87zl
