| 标题 | 基于html5实现的图片墙效果 |
| 内容 | 这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的. 界面上每行最多4个单元格. 以下是代码: 代码如下: <!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/angular.min.js"></script> <title>表格界面</title> <style type="text/css"> ul{list-style:none;} </style> </head> <body ng-controller="myCtrl"> <div> <div> <h3>{{title}}</h3> <input type="button" value="Add new list"> </div> </div></p> <p><div> <ul> <li ng-repeat="i in tasklist.all"> <div> <div></p> <p> <input type="text" ng-model="i.title"> <ul> <li ng-repeat="j in i.list"> <input type="checkbox" ng-model="j.done"> <input type="text" ng-model="j.item"> </li> </ul></p> <p> </div> </div> </li></p> <p> </ul></p> <p></div></p> <p> <script> var app=angular.module("app",[], function () { console.log('started'); });</p> <p> var myTaskList={ "all": [ { title:"这是第一个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细3"}, { "done":"false", "item":"明细43"} ]},</p> <p> { title:"这是第2个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细33"}, { "done":"false", "item":"明细4"} ]},</p> <p> { title:"这是第3个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细25"}, { "done":"false", "item":"明细3"}, { "done":"false", "item":"明细4"} ]}, { title:"这是第一个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细3"}, { "done":"false", "item":"明细43"} ]},</p> <p> { title:"这是第2个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细33"}, { "done":"false", "item":"明细4"} ]},</p> <p> { title:"这是第3个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细25"}, { "done":"false", "item":"明细3"}, { "done":"false", "item":"明细4"} ]}, { title:"这是第4个列表", list:[{ "done":"false", "item":"明细13"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细33"}, { "done":"false", "item":"明细4"} ]}</p> <p></p> <p> ] }; app.controller("myCtrl",function($scope){ $scope.title="这里用来演示一个表格布局, 例如照片墙"; $scope.tasklist=myTaskList;</p> <p> }); </script> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。