Verwenden Sie ng-if als Schalter in ng-repeat?


70

Ich arbeite an der Angular App. Ich habe versucht, ng-if zu verwenden und in ng-repeat zu wechseln , aber es ist mir nicht gelungen. Ich habe Daten wie:

   **[{"_id":"52fb84fac6b93c152d8b4569",
       "post_id":"52fb84fac6b93c152d8b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"hoot",},  
      {"_id":"52fb798cc6b93c74298b4568",
       "post_id":"52fb798cc6b93c74298b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"story",},        
      {"_id":"52fb7977c6b93c5c2c8b456b",
       "post_id":"52fb7977c6b93c5c2c8b456a",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"article",},**

$ scope.comments = oben erwähnte Daten
und mein HTML wie:

   <div ng-repeat = "data in comments">
      <div ng-if="hoot == data.type">
          //differnt template with hoot data
       </div>
      <div ng-if="story == data.type">
          //differnt template with story data
       </div>
       <div ng-if="article == data.type">
          //differnt template with article data
       </div> 
   </div>

Wie kann ich dieses Ziel in Angular erreichen?

Antworten:


89

Versuchen Sie , umgeben strings( hoot, story, article) mit Zitaten ':

<div ng-repeat = "data in comments">
    <div ng-if="data.type == 'hoot' ">
        //different template with hoot data
    </div>
    <div ng-if="data.type == 'story' ">
        //different template with story data
    </div>
    <div ng-if="data.type == 'article' ">
        //different template with article data
    </div> 
</div>

8
Nur um auf den Unterschied hinzuweisen (da ich ihn nicht sofort gesehen habe): Die Antwort ist, die Saiten mit Anführungszeichen zu umgeben. Die Verwendung als direkte Literale funktioniert nicht.
— Stephan Rauh

1
Hat diese obige Lösung funktioniert .... ??? Ich habe das gleiche versucht, aber es funktioniert nicht :( Bitte helfen Sie, wie man mit ng-if arbeitet, um mit Literalen zu überprüfen
— Arun

Das funktioniert auch bei mir nicht. Es zeigt immer noch auch mit ng-if='false'undng-show='false'
— Yasin Okumuş


12

Ich werde vorschlagen, alle Vorlagen in separate Dateien zu verschieben und keine Spagetti innerhalb der Wiederholung zu machen

Schauen Sie hier:

html:

<div ng-repeat = "data in comments">
    <div ng-include src="buildUrl(data.type)"></div>
 </div>

js:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {

  $scope.comments = [
    {"_id":"52fb84fac6b93c152d8b4569",
       "post_id":"52fb84fac6b93c152d8b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"hoot"},  
    {"_id":"52fb798cc6b93c74298b4568",
       "post_id":"52fb798cc6b93c74298b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"story"},        
    {"_id":"52fb7977c6b93c5c2c8b456b",
       "post_id":"52fb7977c6b93c5c2c8b456a",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"article"}
  ];

  $scope.buildUrl = function(type) {
    return type + '.html';
  }
});

http://plnkr.co/edit/HxnirSvMHNQ748M2WeRt?p=preview


Das scheint schön zu sein. Ich baue das mit Backend Laravel. Ich erkunde gerade Angularjs. Ist dies mit Laravel Blade Templating möglich? Wenn Sie es mit Frameworks versucht haben?
— Anil Sharma

Leider kenne ich Laravel nicht. Aber solange es sich um einen Winkelcode handelt, wird Angular mit Sicherheit auf süße Weise damit umgehen
— Eugene P.,

Okay, danke für die Hilfe. , definitiv würde ich versuchen, diese Methode
— Anil Sharma

@EugeneP Wird Angular die Vorlage einmal im <ng-include /> erstellen und dann für die ng-Wiederholung verwenden? Oder wird die neue Vorlage jedes Mal von ng-include abgerufen?
— mcranston18

1
@EugeneP Ich werde meine eigene Frage (^) oben für alle anderen beantworten: ng-includes werden vom Browser zwischengespeichert, so dass ein ng-include innerhalb einer ng-Wiederholung zwischengespeichert wird
— mcranston18
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.