当前位置: 首页 > 面试题库 >

使用ng-if作为ng-repeat内部的开关?

顾淳
2023-03-14
问题内容

我正在开发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.comments =上面提到的数据
和我的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中实现此目标?


问题答案:

尝试环绕stringshootstoryarticle)与报价'

<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-repeat-start和end用例,并且工作正常,当我想添加一个内部ng-repeat时出现了问题。这是我的代码 内部ng-repeat到td元素中不起作用,在检查html源代码时看到ngRepeat注​​释,但未创建td元素。 我的丑陋的解决方法(假设我知道该向量的大小)是: 问题答案: 从那时起,我不确定是否使用角度1.1.6,并且在1.1.5或1.0.7

  • 问题内容: 这是显示问题的小提琴。http://jsfiddle.net/Erk4V/1/ 如果我在ng-if内部有一个ng-model,就会出现该模型无法正常工作的情况。 我想知道这是一个错误还是误解了正确的用法。 问题答案: 与其他指令一样,该指令将创建子范围。请参见下面的脚本(或此jsfiddle) 因此,您的复选框将更改子作用域的内部,而不更改外部父作用域。 请注意,如果要修改父作用域中的

  • 问题内容: 我想在内容更改时创建具有自定义行为的列表。我尝试为此创建一个指令,但是我对如何将ng-transclude与ng- repeat指令结合起来感到迷茫。有人可以让我走上正轨吗? HTML: Javascript: 我已经在这里工作了一部分 编辑: 条件: 该项目的模板必须在视图中定义,而不是在指令中定义,并且必须有权访问子作用域中的项目属性。理想情况下,我想像在ng-repeat指令中那

  • 问题内容: 我正在使用AngularJS,并且假设它可以工作(不起作用),我想获得的效果将类似于它将产生的效果。 视图 控制者 我意识到该代码将无法使用,因为它不可用,因为它将仅可用于每一行内的对象。该代码是为了让我了解正在尝试做的事情:即。我希望能够使用其类也基于条件的表行来创建,该条件取决于对行本身的范围功能的访问。。我意识到我 可以 在列上添加ng- class,但这很无聊。有人有更好的主意

  • 问题内容: 我正在开发一个页面,我需要在其中显示一些框(使用),其中包含频道信息以及显示位置(城市)。 我面临的问题是当我重复第二遍时: 这应该获得第一个ng-repeat的$ index值,并使用显示频道的位置创建一个新数组。它确实做到了。但是,当我使用此数组应用第二个ng- repeat时,它无法正常工作。 说我的html看起来像这样(PS:我需要使用索引值而不是因为我将这些框放到列中) JS

  • 问题内容: 我无法让ng-transclude在ng-switch-default指令中工作。这是我的代码: 指示: partials / formField.html 我这样称呼… 产生错误: 它可以正常工作,在ng-switch指令之外,但是我对如何使它工作感到迷惑。有什么建议? 编辑:这是一个实时演示:http : //plnkr.co/edit/3CEj5OY8uXMag75Xnliq?p