初学ng（一）：显示隐藏内容

2019年9月15日 218次阅读 来源: aprildove

刚刚接触ng一周左右~用ng和ionic做了一个小demo

遇到了一个小问题：怎样做，点击一个表格的一行时，下面增加一个图表行，再次点击隐藏图表行；

如下图所示：

《初学ng（一）：显示隐藏内容》

点击时，增加一行图表，再次点击时，图表行会消失。

《初学ng（一）：显示隐藏内容》

实现的过程中 ，我遇到了一些弯路，下面总结一下用到的知识。

显示、隐藏DOM可以有四种方法：

1、ng-show ng-hide

他们用display:none来隐藏DOM元素。

2、ng-switch-*

创建了新的作用域，增加和移除DOM来显隐

3、ng-if

用DOM来增加、移除元素

4、ng-include

为某些角色增加特定的子模板

贴出我使用ng-show达到效果的例子：

HTML
<body ng-app="contactsApp" ng-controller="MainCtrl" >
<ion-header-bar class="bar-positive">
</ion-header-bar>
<ion-content >

    <table class="table table-bordered">
       
        <tbody  ng-repeat="item in items[0].stu1 >
        <tr ng-click="show=!show" >
            <td class="td1">
                <img ng-src="img/{{item.score>80?'gsmile.png':'rsmile.png'}}"/>
            </td>
            <td class="td2">
                {{item.course_name}}
            </td>
            <td class="td3"  >
                {{item.score}}
            </td>
        </tr>
        <tr ng-show="show">
            <td colspan="3" class="td4">
                <img ng-src="img/{{item.score>80?'zheline.png':'pie.png'}}">
            </td>
        </tr>

        </tbody>
    </table>


</ion-content>
</body>
这里用到了一个简单的click判断事件，ng-click=”show=!show”这个click事件，比如第一次是true，点击后就变为false了。
在angular中啊，找到合适的指令，会很事半功倍哦~
    原文作者：aprildove
    原文地址: https://segmentfault.com/a/1190000004373821
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞