Verwenden Sie ng-if in ng-Wiederholung?

arbeite ich an Angular app. Ich habe versucht, ng-if " und " switch innerhalb von ng-repeat, aber war nicht erfolgreich. 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",},**

$Umfang.Anmerkungen = die zuvor genannten Daten
und meine 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 erreichen, das Ding in den Winkel?

InformationsquelleAutor der Frage Anil Sharma | 2014-02-13

  1. 84

    Versuchen Sie, umgeben Sie strings (hoot, story, article) mit Anführungszeichen ': 

    <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>

    InformationsquelleAutor der Antwort steo

  2. 72

    Dieses ist bemerkenswert, wie gut 

    <div ng-repeat="post in posts" ng-if="post.type=='article'">
  <h1>{{post.title}}</h1>
</div>

    InformationsquelleAutor der Antwort Frankey

  3. 12

    Werde ich vorschlagen, verschieben Sie alle Vorlagen in separaten Dateien, und nicht spagetti innen wiederholen

    werfen Sie einen Blick 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

    InformationsquelleAutor der Antwort Eugene P.

Schreibe einen Kommentar