3

My controller grabs people from the server:

$scope.people = [person1, person2, person3, person4, person5,...]

My template needs to display three people per line. For example if it was a table:

<table>
    <tr>
        <td>person1</td><td>person2</td><td>person3</td>
    </tr>
    <tr>
        <td>person4</td><td>person5</td><td>person6</td>
    </tr>
</table>

I wasn't sure how to conditionally apply the <tr> when $index % 3 == 0 or what the best practices are. I know how to do this by adding grouping logic to the controller but I thought it would be best to keep design logic out of the controller.

4

3 に答える 3

1

何年にもわたるAngularの経験の後、これを行う最良の方法は、コントローラーで配列をチャンクに分割することであることは明らかです。元の配列が変更されるたびに、チャンク配列を更新します。

于 2016-06-17T03:40:53.067 に答える
1

あなたがテーブルで言っていることを行う既存の方法はありません。必要なことを行う最も簡単な方法は、固定幅の div を使用して、3 つ後に自動ラップされるようにすることです。

次に例を示します。

HTML

<div ng-app="app">
    <div ng-controller="TableCtrl" class="my-table">
        <span ng-repeat="person in people" class="person">{{person}}</span>
    </div>
</div>

CSS

.my-table{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

.person{
    width: 100px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid black;
}

JavaScript

var app = angular.module('app',[]);
app.controller('TableCtrl', function($scope){

    $scope.people = ['Aaron', 'Abraham', 'Adam', 'Aristotel', 'Aziel', 'Azod', 'Azood'];

});

作業コピー: http://jsfiddle.net/ZX43D/

于 2013-09-02T03:20:25.890 に答える
0

これが私の現在の解決策です（O（N ^ 2）なので、大きなリストには対応していません）。

テンプレート：

<div ng-app="myapp">
    <div ng-controller="testing">
        <div ng-repeat="_ in items">
            <span ng-show="($parent.$index % 3 == 0) && ($parent.$index + 3 > $index) && ($parent.$index <= $index)" ng-repeat="item in items">
                <span ng-show="1">
                    {{item}}
                </span>
            </span>
        </div>
    </div>
</div>

コントローラ：

angular.module('myapp', []);

function testing($scope){
    $scope.items = ['a', 'b', 'c', 'd','e','f','g'];
}

結果：

a b c
d e f
g

フィドル:

http://jsfiddle.net/LjX3m/

結論：

@aaronfrostが言及しているように、おそらくこれにCSSを使用してみます。(ただし、チャンクごとにいくつかのラッピング div が必要な場合があるため、不可能な場合があります)。

于 2013-09-02T03:38:27.660 に答える