如何使用ng-if和tr-tag以及ng-repeat?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用ng-if和tr-tag以及ng-repeat?相关的知识,希望对你有一定的参考价值。

有人可以帮我吗?下面是我的代码和问题解释。

<table>
 <thead>
   <tr>
     <th>Icon</th>
     <th>Name</th>
     <th>Details</th>
   </tr>
 </thead>

 <tbody ng-repeat="category in editor.categories">
    <tr>
      <th>{{category.categoryName}}</th>
    </tr>
    <tr ng-repeat="feature in category.features"> // Question?
       <td>{{feature.iconImg}}</td>
       <td>{{feature.featureName}}</td>
       <td>{{feature.details}}</td>
     </tr>
     <tr ng-if="feature.id==1"> // condition 1
     </tr>
     <tr ng-if="feature.id==2"> // condition 2
     </tr>
  </tbody>
</table>

现在,让我解释一下这个问题。我有一组类别。每个类别作为一组功能。

现在我的问题是,如何根据ng-if条件显示每个类别的这些功能。即,条件1的<tr>只有在feature.id==1时才会显示,并且只有feature.id==2才会显示条件2。

问:如何根据不同的条件包含我的ng-if条件?

非常感激您的帮忙。

答案

在一个标签中同时使用ng-if和ng-repeat:

<tr ng-repeat="feature in features"
    ng-if="feature.id === 1" >
</tr>

或者,如果要有条件地显示某些模板,可以使用ng-switch,例如:

<tr
    ng-repeat="feature in features"
    ng-switch="feature.id" >
    <span ng-switch-when="1"></span>
    <span ng-switch-when="2"></span>
</tr>
另一答案

检查开关和开关时间

https://docs.angularjs.org/api/ng/directive/ngSwitch

问候

以上是关于如何使用ng-if和tr-tag以及ng-repeat?的主要内容,如果未能解决你的问题,请参考以下文章

angularJs十个面试题

Angular ng-if不重新编译指令

调整高度Tags Dynamically Generated By ng-if Directive

在 ng-if 上的跨平台应用程序中延迟显示 UI

Angular Radio 默认选择和 ng-if 按钮不起作用

html ng-class和ng-if(ng-class可以包含一个对象,其中key和expression对作为对象,ng-if类似于if语句)