Archive for April 13th, 2015

AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 2)

由于篇幅过长,所以人为强行分成两篇,望见谅。

接上篇,AngularJS Tutorial – Learn AngularJS in 30 minutes (Part 1)

隐藏和显示elements

AngularJS另外还提供了一套指令(directive),允许用户根据一些条件或者表达式来隐藏或者显示某个DOM element。这些指令有ngHide,ngShow,ngSwitch和ngIf。这些指令提供了相类似的结果,不过在不同的情况下它们分别会很有用。当你遇到一些类似case switch的情况下ngSwitch指令会很有用,比如一些单选按钮开关(radio switch toggle)。ngHide,ngShow和ngIf有些本质上的不同,虽然表面十分相似。ngIf会将受影响的element从DOM里面移除,而ngHide和ngShow只是加了一个 display:none 的css属性来隐藏它。

因此因尽量可能的使用ngIf,因为这样可以为已经忍受杂乱不堪DOM的浏览器省掉一部分内存。ngHide和ngShow在显示动画效果的时候会特别有用,因为ngIf会由于牵涉到DOM的创建和删除这类比较消耗资源的操作通常会影响到动画的展示效果。

在我们这个简单的例子里,我想在每个我最喜欢的TV show的边上加上一个星星。可以使用ngIf来达到这个效果,让我们来修改index.html。

<h3>A list of TV shows</h3>
<ul class="list-group">
    <li class="list-group-item" ng-repeat="show in main.shows"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
</ul>

这样在show.favorite这个属性是true的时候,页面DOM就会被简单的加上一个星星。这里还另外支持表达式,所以像 show.favorite == true 或者 show.favorite != false这样的表达式在这里也同样可行。
Continue reading →