如何在AngularJS ng-repeat中使用索引显示列表项

时间:2015-06-07 17:44:37

标签: java javascript html angularjs twitter-bootstrap

我需要以角度显示项目列表,每行只有2个项目。假设列表中有5个项目,输出应该是3行,前2行有2列,最后一行有一列。

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{result[$index]}}</div>
    <div class="col-xs-6">{{result[$index + 1]}}</div>
</div>

以上是代码,当结果是项目列表时,此代码可以正常工作。但是当结果是对象列表时,它不会打印。例如,如果结果对象有birthDate或Id属性,我该如何显示? {{result.birthDate}}打印正确的值,但如何打印索引+ 1值?我尝试{{result[$index + 1].birthDate}}{{result.birthDate[$index + 1]}}无效。 下面的代码不起作用,但我需要这样的东西,

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{result[$index].birthDate}}</div>
    <div class="col-xs-6">{{result[$index + 1].birthDate}}</div>
</div>

感谢您的帮助

2 个答案:

答案 0 :(得分:2)

DEMO - http://jsfiddle.net/softvar/yk8phbc5/

<强> JS

var app = angular.module('myApp',[]);

app.controller('myCtrl', function ($scope) {
    $scope.results = [
        {birthDate: '01/08/1982'},
        {birthDate: '11/08/1992'},
        {birthDate: '21/08/2002'},
        {birthDate: '31/08/2012'}
    ]
});

<强> HTML

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
        <div class="col-xs-6">First: {{results[$index].birthDate}}</div>
        <div class="col-xs-6">Second: {{results[$index + 1].birthDate}}</div>
        <br/>
    </div>
</div>

答案 1 :(得分:0)

{{result [$ index] .birthDate}}必须为{{结果 [$ index] .birthDate}}

<div ng-repeat="result in results" ng-if="$index % 2 == 0" class="row">
    <div class="col-xs-6">{{results[$index].birthDate}}</div>
    <div class="col-xs-6">{{results[$index + 1].birthDate}}</div>
</div>