11

参考之前关于 ng-if in DIV 的帖子以供参考此处给出的链接 :: Ng-If inside DIV，但是当我尝试使用 ng-if inside table 和 td 上的 ng-repeat 时似乎没有运作良好。如果我错了，请纠正我我做了 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>
4

3 回答 3

13

ng-if应该适合您的try::1。这是小提琴工作示例

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

于 2014-05-05T07:27:25.163 回答
4

如果表格结构的格式不正确，大多数浏览器都会忽略表格结构中的任何其他 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>
于 2014-05-05T06:43:39.353 回答
3

避免使用 inside 以遵守更好的浏览器语义。此外，在检查相等时，如果要确保相等表达式的 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/

于 2014-05-05T07:38:40.647 回答