Erstellen von eckigen Element einmal

Question

Ich habe eine eckige Seite, die eine Liste von Elementen anzeigt. Es iteriert über die Liste und zeigt sie in einem div an. Hier ist der HTML-Code für das:

<div ng-repeat="item in items"> 
    <div class="item-title-section"> 
     <h1>{{item.text}}</h1> 
    </div> 
    <div class="item-special-section" 
      ng-show="item.type == 'FooB' || 
        item.type == 'FooC' || 
        item.type == 'FooD'"> 
     <div> 
      <h2>Speical</h2> 
      <p>Type Section</p> 
     </div> 
     <div> 
      <span>{{item.text}}</span> 
     </div> 
    </div> 
</div> 

Die item-title-section immer zeigt. Aber ich möchte nur die item-special-section zeigen, wenn das aktuelle Element vom Typ B, C oder D ist. Das Problem hier ist, wenn die Liste alle 3 Elemente enthält, ich möchte nur das div gedruckt werden, aber der Text jedes Elements gedruckt. Also in diesem Fall:

{ 
    { 
     type: FooA, 
     title: FooA, 
     text: "Some text for this element" 
    }, 
    { 
     type: FooB, 
     title: FooB, 
     text: "Some text for this element" 
    }, 
    { 
     type: FooC, 
     title: FooC, 
     text: "Some text for this element" 
    } 
} 

Die item-special-section div druckt zweimal. Gibt es einen Weg in eckig, um statisch ein html-Element zu erstellen, dh wenn es erstellt wird, erstellen Sie es nur einmal?

Answer 1

So eine Problemumgehung, die ich für Ihr Problem herausgefunden habe, besteht darin, die Logik zuzuweisen, nur ein spezielles Element zu einer separaten Funktion anzuzeigen, die an die $scope angeschlossen ist. Ich habe eine Plnkr Example erstellt, um meine Erklärung zu demonstrieren.

HTML

<div class="item-special-section" 
    ng-show="showSpecialSection(item.type)"> 
    <p>I'm a special case!</p> 
    <p>{{item.text}}</p> 
</div> 

Im HTML erlauben wir nur dieses Element zu zeigen, wenn showSpecialSection kehrt true und wir in der item.type passieren.

JavaScript

// Define out specialItems 
$scope.specialItems = ['FooB', 'FooC', 'FooE']; 

// Create an array to stash the first item that fulfills 
// the requirement in showSpecialSection 
$scope.allowedItem = []; 

$scope.showSpecialSection = function(item) { 
    // First we check if the item is in our defined list 
    // of special items 
    if ($scope.specialItems.indexOf(item) != -1) { 

    // Next depending on if allowedItem has anything, 
    // we either add it to allowedItem or check if it is 
    // already inside allowedItem 
    if ($scope.allowedItem.length == 0) { 
     $scope.allowedItem.push(item); 
     return true; 
    } 
    else if ($scope.allowedItem.indexOf(item) != -1) { 
     return true; 
    } 
    } 
    // return false if all other logic checks failed 
    return false; 
} 

Bitte lassen Sie mich wissen, ob dies für Sie arbeitet und kommentieren, wenn Sie Fragen haben. Cheers ~