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.