可以在angularJS v1中每次使用ng-repeat項目兩次嗎？

所以我在使用ng-repeat將兩個數組項放入div標籤內時遇到了一些麻煩。嘗試了一些事情，但無法弄清楚。下面你可以看到我試圖達到的佈局......任何幫助都會很棒！可以在angularJS v1中每次使用ng-repeat項目兩次嗎？

angular.module('starter', []) 
 

 
.controller('PeopleCtrl', function($scope) { 
 
    $scope.people = [ 
 

 
    { 
 
     image: "https://placehold.it/350x150", 
 
     dob: "23/06/1990" 
 
    }, { 
 
     image: "https://placehold.it/350x150", 
 
     dob: "12/12/2000" 
 
    }, { 
 
     image: "https://placehold.it/350x150", 
 
     dob: "12/12/1972" 
 
    } 
 

 
    ] 
 

 
    angular.forEach($scope.people, function(value, key) { 
 
    var dateParts = $scope.people[key].dob.split("/"); 
 
    var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]); 
 
    $scope.people[key].dob = date; 
 
    }) 
 

 
});

<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="starter" ng-controller="PeopleCtrl"> 
 

 

 
    <!-- I want to put 2 people in a row. Then the next 2 people in a row... --> 
 

 
    <div class="row" ng-repeat="person in people | orderBy:'-dob'"> 
 

 
    <div class="col col-50"> 
 
     <img ng-src="{{person.image}}"> 
 
     <p>{{person.dob | date : 'dd MMM yyyy'}}</p> 
 
    </div> 
 

 
    <!-- Here I want the next item in the array, not the same one. --> 
 
    <div class="col col-50"> 
 
     <img ng-src="{{person.image}}"> 
 
     <p>{{person.dob | date : 'dd MMM yyyy'}}</p> 
 
    </div> 
 

 
    </div> 
 

 
</body>

我應該提一下我使用離子的網格。 http://ionicframework.com/docs/components/#grid

來源

2016-04-21 Lozza

爲什麼不是每個第二個項目後，剛拆？也許沿着這樣的路線：

。你可以用你喜歡的任何方式使用它。 –

'ng-repeat'內有一個名爲'$ index'的變量。你可以利用它和'ng-if'來有條件地輸出div – DrinkBird

看一看到link

我猜你使用離子基於col col-50。

angular.module('starter', []) 
 

 
.controller('PeopleCtrl', function($scope) { 
 
    $scope.people = [ 
 

 
    { 
 
     image: "https://placehold.it/350x150", 
 
     dob: "23/06/1990" 
 
    }, { 
 
     image: "https://placehold.it/350x150", 
 
     dob: "12/12/2000" 
 
    }, { 
 
     image: "https://placehold.it/350x150", 
 
     dob: "12/12/1972" 
 
    } 
 

 
    ] 
 

 
    angular.forEach($scope.people, function(value, key) { 
 
    var dateParts = $scope.people[key].dob.split("/"); 
 
    var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]); 
 
    $scope.people[key].dob = date; 
 
    }) 
 

 
});

<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 

 

 
</head> 
 

 
<body ng-app="starter" ng-controller="PeopleCtrl"> 
 

 

 
    <!-- I want to put 2 people in a row. Then the next 2 people in a row... --> 
 
    <div class="row" style=" 
 
-webkit-flex-wrap: wrap; 
 
flex-wrap: wrap; 
 
"> 
 
    <div class="col col-50" ng-repeat="person in people | orderBy:'-dob'"> 
 

 
    <div > 
 
     <img ng-src="{{person.image}}"> 
 
     <p>{{person.dob | date : 'dd MMM yyyy'}}</p> 
 
    </div> 
 

 
    
 

 
    </div> 
 
</div> 
 

 
</body>

來源

2016-04-21 14:06:53

難道你不能只給出包含col，col的6的div，它將加起來12（bootstrap的最大寬度）並開始一個新行。

來源

2016-04-21 13:55:12

您可以在顯示對象之前操作對象。這有點冒險，我不推薦它。也許有更多CSS經驗的人可以推薦一個純粹的CSS版本。

//put two people per array inside $scope.people 
$scope.people2 = []; 
while($scope.people.length) { 
    $scope.people2.push($scope.people.splice(0,2)); 
}

然後在你的HTML，你可以這樣做：

<div> 
    <div class="row" ng-repeat="2people in people2"> 
     <div ng-repeat="person in 2people">{{person}}</div> 
    </div> 
</div>

來源

2016-04-21 13:58:15 Kyle

還有的要對此兩種方式;

<div class="row" ng-repeat="person in people | orderBy:'-dob'"> 
     <div class="col col-50"> 
     <img ng-src="{{person.image}}"> 
     <p>{{person.dob | date : 'dd MMM yyyy'}}</p> 
    </div> 
    <div data-ng-show="$index % 2 == 0">My Seperator</div> 
</div>

或：

<br ng-if="!(($index + 1) % 2)" />

或CSS：

<div class="section"> 
    <div ng-repeat="person in people | orderBy:'-dob'"> 
     <img ng-src="{{person.image}}"> 
     <p>{{person.dob | date : 'dd MMM yyyy'}}</p> 
    </div> 
    </div> 

.section > div:nth-of-type(2n+1){ 
    clear:both; 
}

來源

2016-04-21 14:04:14

可以在angularJS v1中每次使用ng-repeat項目兩次嗎？

回答

相關問題