Gruplar ng-yinelemede nasıl ayrılır

Question

Normalde ng-repeat kullanarak göstermek istediğim öğeler var. Bir sırayla (kolay) göstermek istiyorum, ancak sipariş edilen özellik değiştiğinde, arada bir HTML istiyorum.

Örnek: (Fiddle):

<div ng-app ng-controller="Main"> 
    <div ng-repeat="item in items | orderBy:'role'"> 
     {{item.role}} - {{item.name}} 
    </div> 
</div> 

function Main($scope){ 
    $scope.items = [{name: 'First', role: 1}, 
        {name: 'Second', role:2}, 
        {name: 'Third', role: 1}, 
        {name: 'Fourth', role: 2}]; 
    } 

Ben baskıya istiyorum:

1 - Birinci
1 - Üçüncü
(bazı ayırıcı Kode)
2 - İkinci
2 - Dördüncü

Answer 1

Kapsamınızda bir işlev oluşturmak isteyeceksiniz.

$scope.currentRole = 'something'; 
$scope.CreateHeader = function(role) { 
     showHeader = (role!=$scope.currentRole); 
     $scope.currentRole = role; 
     return showHeader; 
} 

Sonra HTML'nize: @lucuma tarafından çözüm yalnızca döngü aracılığıyla ilk kez çalışır

<div ng-app ng-controller="Main"> 
    <div ng-repeat="item in items | orderBy:'role'"> 
     <div ng-show="CreateHeader(item.role)"> 
     something here for the header 
     </div> 
     {{item.role}} - {{item.name}} 

    </div> 
</div> 

Answer 2

. Angular listeyi yeniliyorsa, değişken hala önceki döngüden ayarlanacaktır.

<div ng-app ng-controller="Main"> 
    <div ng-repeat="item in items | orderBy:'role'"> 
    <div ng-show="item.header"> // <== with this change 
     something here for the header 
    </div> 
    {{item.role}} - {{item.name}} 
    </div> 
</div> 

Oh, ve sıralamak:

function Main($scope){ 
    $scope.items = [{name: 'First', role: 1, header: false}, 
        {name: 'Second', role:2, header: false}, 
        {name: 'Third', role: 1, header: true}, 
        {name: 'Fourth', role: 2, header: false}]; 
} 

Sonra @lucuma HTML çalışır:

Bunun yerine, başlatma sırasında listeye yeni bir özellik (diyelim ki, header) eklendi listeyi bir kez başlatırken ve orderBy filtresini kaldırın.