使用 ng-if 作为 ng-repeat 中的开关？

Posted 2023-03-14

【中文标题】使用 ng-if 作为 ng-repeat 中的开关？

【英文标题】：Using ng-if as a switch inside ng-repeat?

【发布时间】：2014-03-12 04:19:15

【问题描述】：

我正在开发 Angular 应用程序。我尝试使用 ng-if 并在 ng-repeat 内切换，但没有成功。我有这样的数据：

   **["_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.cmets = 上面提到的数据 和我的 html 一样：

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

如何在 Angular 中实现这一目标？

【参考方案1】：

尝试用引号 ' 包围 strings（hoot、story、article）：

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

【讨论】：

只是为了指出区别（因为我没有立即看到它）：答案是用引号将字符串括起来。将它们用作直接文字是行不通的。

上述解决方案是否有效....？我尝试了同样的方法，但没有成功:(请帮助如何使用 ng-if 来检查文字

这对我也不起作用。即使使用ng-if='false' 和ng-show='false'，它仍然显示

【参考方案2】：

我会建议将所有模板移动到单独的文件中，并且不要在重复里面做意大利面

看这里：

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

【讨论】：

这看起来不错。我正在使用后端 Laravel 构建它。我只是在探索 Angularjs。这可以通过 laravel 刀片模板实现吗？如果你用框架尝试过？

不幸的是，我不熟悉 laravel。但是，无论如何，只要它是角度代码，角度肯定会以一种甜蜜的方式处理它

好的，谢谢您的帮助。 ，我肯定会尝试这种方法

@EugeneP Angular 会在 中构建模板一次，然后将其用于 ng-repeat 吗？还是每次都从 ng-include 获取新模板？

@EugeneP 我将为其他任何人回答上面我自己的问题 (^)：ng-include 被浏览器缓存，因此 ng-repeat 中的 ng-include 将被缓存跨度>

【参考方案3】：

这个也值得一提

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

【讨论】：

ng-if in ng-repeat 很有帮助

这至少对 angular 1.2 不起作用：github.com/angular/angular.js/issues/3584.

这帮助我摆脱了空的divs。