Question

参考早期关于ng-if在DIV 中的帖子，以供参考此处给出的链接:: Ng-If within DIV ，但是当我尝试使用ng-if内表时使用ng -repeat on td它似乎不太好用。纠正我，如果我错了我根据条件做了2次尝试显示列但没有工作。下面我给出了参考代码。有人可以帮我这个吗？请告知您是否需要更多说明。

HTML

尝试:: 1

   <table>
        <tr ng-repeat = "data in comments">
            <td ng-if="data.type == 'hootsslllll' ">
             //differnt template with hoot data
            </td>
            <td ng-if="data.type == 'story' ">
             //differnt template with story data
            </td>
            <td ng-if="data.type == 'article' ">
            //differnt template with article data
            </td>
        </tr>

    </table>

尝试:: 2

<table>
    <tr ng-repeat = "data in comments">
        <div ng-if="data.type == 'hootsslllll' ">
            <td> //differnt template with hoot data </td>
        </div>
        <div ng-if="data.type == 'story' ">
            <td> //differnt template with story data </td>
        </div>
        <div ng-if="data.type == 'article' ">
            <td> //differnt template with article data </td>
        </div>
    </tr>
</table>

Answer 1

ng-if适用于 try :: 1 。这是小提琴工作示例

http://jsfiddle.net/shivaraj/n3xWB/

Answer 2

如果表格结构形式不正确，大多数浏览器都会忽略表格结构中的任何其他DOM元素。这意味着，在上面的代码中，您不能在div中使用tr标记。试试这个

<table>
  <tr ng-repeat = "data in comments">
    <td ng-if="data.type == 'hootsslllll' "> //differnt template with hoot data </td>
    <td ng-if="data.type == 'story' "> //differnt template with story data </td>
    <td ng-if="data.type == 'article' "> //differnt template with article data </td>
  </tr>
</table>

Answer 3

避免使用inside来遵守更好的浏览器语义。此外，在检查平等时，===＆＃39;如果要确保等式表达式的RHS上的值的类型，则可能是更好的选择。

这适用于<table>和<div>个人

<div ng-controller="tableCtrl">
        <div ng-repeat="data in comments">
            <div ng-if="data.type === 'hootsslllll' ">//differnt template with hoot data</div>
            <div ng-if="data.type === 'story' ">//differnt template with story data</div>
            <div ng-if="data.type === 'article' ">//differnt template with article data</div>
        </div>
</div>

http://jsfiddle.net/Mu6T6/3/

如何使用ng-if与表格根据条件显示td

3 个答案: