Question

我是AngularJs的新手。我想重复UL和每个UL有两个LI。在Model中，我有一组Customer Object。

Customers =[{Customer:1},{Customer:2},{Customer:3},{Customer:4},{Customer:5}];

在视图中我想要如下，

<ul><li>1</li><li>2</li></ul>
<ul><li>3</li><li>4</li></ul>
<ul><li>5</li></ul>

Answer 1

你去了：http://jsfiddle.net/F45Db/

    <ul ng-repeat="c in dummy track by $index" ng-class="{last: $last}">
        <li ng-repeat="cust in Customers"
            ng-if="$index >= $parent.$index*2 && $index < $parent.$index*2 + 2">
             {{cust.Customer}}
        </li>
    </ul>

JS：

function Controller($scope){
    $scope.Customers = [{Customer:1},{Customer:2},{Customer:3},{Customer:4},{Customer:5}];
    $scope.$watchCollection('Customers', function(){
        if($scope.Customers.length){
            $scope.dummy = new Array(Math.ceil($scope.Customers.length/2));
        }
    });
}

Answer 2

如果您期望一个包含li项目的无序列表，您可以在示例中看到this plunkr。您将如何决定何时开始第二次ul？你也没有显示5的li。

HTML：

<ul>
  <li ng-repeat="person in customers">
    {{person.Customer}}
  </li>
</ul>

javascript可能如下所示：

app.controller('MainCtrl', function($scope) {
  $scope.customers =[{Customer:1},{Customer:2},{Customer:3},{Customer:4},{Customer:5}];
});

Ul LI与AngularJs绑定

2 个答案: