论angularJs中ng-show和ng-if的区别

在angularJs中有几种判断方法, 有ng-hide, ng-show, ng-if 在使用中遇到过坑, 该坑就是试用ng-show或者ng-hide时, 页面排班会因为有被隐藏的元素, 导致页面排版出现问题.

下面的代码是例子:

1
2
3
4
<a class="badge badge-energized" ng-show="article.type == '通知'"></a>
<a class="badge badge-royal" ng-show="article.type == '规范'"></a>
<a class="badge badge-calm" ng-show="article.type == '业务'"></a>
<a class="badge badge-balanced" ng-show="article.type == '酬金'"></a>

就是根据不同的文章类型, 显示不同的badge, 在使用ng-show的时候, 总会遇到badge上下不能对齐的问题, 经过排查发现ng-show仅仅是将元素的class中增加一个hide, 并不会移除元素. 这样会导致在排班的时候, 样式会有略微错位.

讲代码改为:

1
2
3
4
<a class="badge badge-energized" ng-if="article.type == '通知'"></a>
<a class="badge badge-royal" ng-if="article.type == '规范'"></a>
<a class="badge badge-calm" ng-if="article.type == '业务'"></a>
<a class="badge badge-balanced" ng-if="article.type == '酬金'"></a>

之后, 样式正常

Comments

Copyright © 2015 Hging . Powered by Octopress | Theme fabric by Pankaj Kumar