À l'aide de ng-si à l'intérieur de ng-repeat?

Je suis en train de travailler sur Angulaire de l'app. J'ai essayé d'utiliser ng-si et commutateur à l'intérieur ng-repeat mais n'a pas réussi. J'ai des données comme:

   **[{"_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",},**

$champ d'application.commentaires = données mentionnées ci-dessus

et mon code Html comme : 

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

Comment puis-je obtenir cette chose Angulaire?

InformationsquelleAutor Anil Sharma | 2014-02-13
  1. 88

    Essayer d'entourer strings (hoot, story, article) avec des citations ': 

    <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>
    • Juste pour souligner la différence (puisque je ne l'ai pas vu tout de suite): la réponse est d'entourer les Chaînes de caractères entre guillemets. En utilisant comme des littéraux ne fonctionne pas.
    • Est-ce la solution ci-dessus ai travaillé.... ??? j'ai essayé la même chose mais qu'il ne soit pas travaillé 🙁 s'il vous plaît aider comment travailler avec ng-si de vérifier avec les littéraux
    • Cela ne fonctionne pas pour moi non plus. Il montre encore même avec ng-if='false' et ng-show='false'
    InformationsquelleAutor steo
  2. 76

    Celui-ci est à noter que bien 

    <div ng-repeat="post in posts" ng-if="post.type=='article'">
  <h1>{{post.title}}</h1>
</div>
    • ng-if dans ng-repeat est Utile
    • Cet exemple ne fonctionne pas
    • cet exemple a totalement fonctionné pour moi 🙂
    • Cela ne fonctionne pas, au moins pour angulaires 1.2: github.com/angular/angular.js/issues/3584.
    • Cela m'a aidé à me débarrasser de vide divs.
    InformationsquelleAutor Frankey
  3. 12

    Je propose de déplacer tous les modèles, dans des fichiers séparés et de ne pas faire spagetti à l'intérieur de répéter

    prendre un coup d'oeil ici:

    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

    • Cela semble être gentil. Je suis la construction de ce avec backend Laravel. Je suis tout simplement d'explorer Angularjs. Est-ce serait possible avec laravel lame de template? si vous avez essayé avec les cadres?
    • malheureusement, je ne suis pas familier avec laravel. mais,de toute façon, tant que c'est angulaire code, angulaire permettra de le manipuler d'une façon agréable pour vous
    • Ok merci pour l'aide. certainement , je voudrais essayer cette méthode
    • Va angulaire construire le modèle dans le <ng-include /> une fois et l'utiliser ensuite pour le ng-repeat? Ou il va chercher le nouveau modèle de ng-inclure à chaque fois?
    • Je vais répondre à ma propre question (^) au-dessus de tous les autres: ng-inclus sont mis en cache par le navigateur, donc une ng-inclure à l'intérieur d'une ng-repeat serait mis en cache
    InformationsquelleAutor Eugene P.