Angular deckgrid

相关标签：编程工具

Angular deckgrid 是一个数据网格用AngularJS的一部分，需要的朋友欢迎下载。该指令不依赖于视觉展示，所有的响应和美观都依赖于你的 CSS 文件。如果你现在选择使用angular.js作为你的开发框架的话，实现类似masonry的网格布局效果将会变得更加简单，今天介绍的轻量级类库Angular-deckgrid能够帮助你快速的生成类似的魔术布局效果。

安装教程

一. 安装

1. bower install --save angular-deckgrid

2. 添加代码到你的HTML

3. 添加到你的angular模块中：

angular.module('your.module'， [

'akoenig.deckgrid'

]);

使用教程

定义声明：

定义数据结构：

$scope.photos = [

id: 'p1'， 'title': 'A nice day!'， src: "http://lorempixel.com/300/400/"。

id: 'p2'， 'title': 'Puh!'， src: "http://lorempixel.com/300/400/sports"。

id: 'p3'， 'title': 'What a club!'， src: "http://lorempixel.com/300/400/nightlife"

];

定义cardtemplate：

{{card.title}}

为了更好的设计响应式的页面，你可以选择使用如下来代码来定义不同设备或者显示器上的展示行为：

@media screen and (max-width: 480px){

.deckgrid[deckgrid]::before {

content: '1 .column.column-1-1';

}

.deckgrid .column-1-1 {

width: 100%;

}

}

更新日志

0.6.0版本

打开：[修正]我们需要一个解决方案以防止结合的模型innerHTML模板

0.5.0版本

升级用AngularJS的依赖bower.json（v1.3.0）。

改变集合比较触发重画。

转自美元的手表以watchcollection美元为了获得更多的性能。

移植普通未定义检查用AngularJS标准功能。

免责声明：本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件与我们联系处理，我们将尽快删除相关内容。