ng-if / ng-show/ng-hide ng-swith

Posted 2020-10-01

ng-show/ng-hide

在用原生js 或者 jquery的时候，我们一般都可以定义一个类，通过添加和删除这个类来实现元素的显示和隐藏切换。其实这部分从网上参考资料来看，Angular也是这样实现的，根据表达式正确与否，动态添加或者删除 ng-hide 这个Angualr预先定义好的class。调用方式具体如下：

可以是设置一个变量

<div ng-show=‘show‘></div>

也可以是直接使用 true / false

<div ng-show=‘true‘></div>

对于变量，我们在js 中直接设置这个值就可以。

这个指令的特性是，即使我们暂时隐藏这部分内容，它也会被dom 渲染。

ng-if

使用方式也是设置一个表达式：

可以是设置一个变量

<div ng-if=‘more‘></div>

也可以是直接使用 true / false

<div ng-if=‘true‘></div>

对于变量，我们在js 中直接设置这个值就可以。

这是一个能帮我们节省效率的指令，如果表达式值 === false , 则这部分不会在dom中渲染，或者原有的内容会被从dom中删除。所以如果有一部分内容，不需要一开始就显示，我们可以先用ng-if 让它隐藏。例如一个显示更多的下拉按钮，刚开始不显示的部分，可以ng-if 来设置，等我们点击了更多按钮，再设置ng-if = true 既可。这样子减少了页面渲染事件，提高了效率呢。

ng-swith

使用方式比前前两个复杂一点，不过也非常直观，类似原生js 中的switch 函数：

在外层父级元素设置 ng-switch 为一个表达式A ，那么他的子元素相当于几个不同的选项，表达式A 对应哪个子元素的 ng-switch-with 值，就显示那部分。

<div ng-switch=‘showpart‘>
    <div ng-switch-default></div>
    <div ng-switch-with=‘home‘></div>
    <div ng-switch-with=‘blog‘></div>
    <div ng-switch-with=‘about‘></div>
    <div ng-switch-with=‘contact‘></div>
</div>

这也是一个能帮我们节省效率的指令。和ng-if 一样，一开始如果不等于父级的 ng-switch 表达式的值，则不会在页面渲染的，而且我们也可以通过 ng-switch-default 来设置默认的显示部分。比如以往常见的 Tab 选项卡，用这个指令实现起来就非常的容易。