标签：style blog http color io os ar sp 数据
我有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用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 class="row"> <div class="col-sm-12"> <h3 class="label-info">{{title}}</h3> <input type="button" value="Add new list" class="btn-primary"> </div> </div> <div class="row"> <ul class=""> <li ng-repeat="i in tasklist.all"> <div class="col-xs-6 col-sm-4 col-md-3"> <div class="thumbnail"> <input type="text" ng-model="i.title" style="width: 100%"> <ul> <li ng-repeat="j in i.list"> <input type="checkbox" ng-model="j.done"> <input type="text" ng-model="j.item"> </li> </ul> </div> </div> </li> </ul> </div> <script> var app=angular.module("app",[], function () { console.log(‘started‘); }); var myTaskList={ "all": [ { title:"这是第一个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细3"}, { "done":"false", "item":"明细43"} ]}, { title:"这是第2个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细33"}, { "done":"false", "item":"明细4"} ]}, { 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"} ]}, { title:"这是第2个列表", list:[{ "done":"false", "item":"明细1"}, { "done":"false", "item":"明细2"}, { "done":"false", "item":"明细33"}, { "done":"false", "item":"明细4"} ]}, { 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"} ]} ] }; app.controller("myCtrl",function($scope){ $scope.title="这里用来演示一个表格布局, 例如照片墙"; $scope.tasklist=myTaskList; }); </script> </body> </html>
标签：style blog http color io os ar sp 数据
原文地址：http://www.cnblogs.com/zoltun/p/4028309.html
