我有一组显示特定数字的图块,具体取决于用户选择的选项.我现在想通过显示的任何数字来实现排序.
下面的代码显示了我是如何实现它的(通过在父卡范围内获取/设置值).现在,因为orderBy函数接受一个字符串,我试图在名为curOptionValue的卡片范围中设置一个变量并按此排序,但它似乎不起作用.
那么问题就变成了,如何创建自定义排序功能?
<div ng-controller="aggViewport" >
<div class="btn-group" >
<button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
<div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
<table width="100%">
<tr>
<td align="center">
<h4>{{card.name}}</h4>
</td>
</tr>
<tr>
<td align="center"><h2>{{getOption()}}</h2></td>
</tr>
</table>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
和控制器:
module.controller('aggViewport',['$scope','$location',function($scope,$location) {
$scope.cards = [
{name: card1, values: {opt1: 9, opt2: 10}},
{name: card1, values: {opt1: 9, opt2: 10}}
];
$scope.option = "opt1";
$scope.setOption = function(val){
$scope.option = val;
}
}]);
module.controller('aggCardController',['$scope',function($scope){
$scope.getOption = function(){ …Run Code Online (Sandbox Code Playgroud) 我有一个项目列表,我想要适合垂直约束的空间:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
由于我不希望列表具有超过特定高度,但我可以自由地将其水平扩展,我想将列表分成列,如下所示:
One Two Three
Four Five Six
Run Code Online (Sandbox Code Playgroud)
或者,(在我的情况下,顺序并不重要)
One Three Five
Two Four Six
Run Code Online (Sandbox Code Playgroud)
css属性column-count允许将列表分成列,但它只接受固定数量的列.我不知道我将拥有的项目数量(它可以从1到超过40),所以如果我将列数设置为3,任何超过6项的列表都会太高,并且如果只有4个项目,那么只有第一列有两个项目,看起来不均匀.
所以,理想情况下我需要一个row-count属性,但它不存在.我想我也可以在Javascript中做到这一点,但我正在寻找一个只有CSS的解决方案.
我尝试了一些东西:float:left每一个li都把列表放在一行.要将它分成两行,我需要不应用于float:leftN/2元素.我不知道该怎么做.
我也知道我可以通过将其分成多个ul,每个都有两个li,以及float:left它们来实现,但我想避免将HTML弄为完全呈现的东西.
有人有解决这个问题的方法吗?
编辑:我想我在解释我的要求时并不清楚.我希望将列表分类到列中,而不知道我将要拥有多少项,因此我将始终有两行.
所以例如有7个项目,我希望:
One Two Three Four
Five Six Seven
Run Code Online (Sandbox Code Playgroud)
并有3个项目:
One Two
Three
Run Code Online (Sandbox Code Playgroud)