[Angularjs]ng-show和ng-hide

发布时间：2020-12-17 10:35:58 所属栏目：安全来源：网络整理

导读：写在前面系列文章 ng-show和ng-hide 一个例子布尔值 show-hide this is a div which is show this is a div which is hide 按钮函数 show-hide /spanspan style="color: #0000ff;"gt;//spanspan style="color: #800000;"gt;script/spanspan style="color:

写在前面

系列文章

ng-show和ng-hide

一个例子

布尔值

show-hide this is a div which is show this is a div which is hide 按钮

函数

show-hide

</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span><span style="background-color: #f5f5f5; color: #800000;"&gt;
    .div </span><span style="background-color: #f5f5f5; color: #000000;"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        border</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; 1px solid #0094ff</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000;"&gt;
        background-color</span><span style="background-color: #f5f5f5; color: #000000;"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt; rebeccapurple</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000;"&gt;}</span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;style</span><span style="color: #0000ff;"&gt;></span>

</head>
<body>
<div ng-controller="showHideController">
<div ng-show="isShow" class="div">this is a div which is show</div>

<button ng-click="showorhide()">按钮</button>
</div>
</body>
</html>

show-hide </script> <style> .div { border: 1px solid #0094ff; background-color: rebeccapurple; } </style>
</head>
<body>
<div ng-controller="showHideController">
<div ng-show="isShow" class="div">this is a div which is show</div>

<button ng-click="showorhide()">按钮</button>
<h1>isShow={{isShow}}</h1>
<input type="text" name="name" value="" ng-model="animal" placeholder="请输入一种动物" />

<div ng-show="animal=='dog'">this is a dog</div>
</div>
</body>
</html>

?

总结

,,以及,实现的元素显示和隐藏功能但这三种模式将能应用到更多的场景。其实归结到底的话算是一种：控制一个布尔值来改变元素的显示与隐藏的。关于ng-hide的用法与ng-show的用法类似。这里不再赘述。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!