相关疑难解决方法(0)

ng-repeat中的自定义排序功能

我有一组显示特定数字的图块,具体取决于用户选择的选项.我现在想通过显示的任何数字来实现排序.

下面的代码显示了我是如何实现它的(通过在父卡范围内获取/设置值).现在,因为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)

angularjs ng-repeat

110
推荐指数
3
解决办法
14万
查看次数

如何在两行中显示列表?

我有一个项目列表,我想要适合垂直约束的空间:

<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)

css css3 html-lists

21
推荐指数
3
解决办法
5万
查看次数

标签 统计

angularjs ×1

css ×1

css3 ×1

html-lists ×1

ng-repeat ×1