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?

angularjs dom laravel-4 angularjs-ng-repeat angularjs-ng-if Anil Sharma
quelle

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>
steo
quelle
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ş
84

Dieser ist auch bemerkenswert 

<div ng-repeat="post in posts" ng-if="post.type=='article'">
  <h1>{{post.title}}</h1>
</div>
Frankey
quelle
ng-ifin ng-repeatist hilfreich
abdul rashid
1
Dies funktioniert zumindest für Angular 1.2 nicht: github.com/angular/angular.js/issues/3584 .
Stilltorik
Dies half mir, leere divs loszuwerden .
ScrapCode
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

Eugene P.
quelle
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