Question

我指的是使用Jquery编写的这个小提琴http://jsfiddle.net/9HXzW/55/。

HTML中的代码是，

<div id="right-column-sidebar">
    <ol>
        <li><input type="checkbox"/>Check box 1</li>
        <li><input type="checkbox"/>Check box 2</li>
        <li><input type="checkbox"/>Check box 3</li>
        <li><input type="checkbox"/>Check box 4</li>
        <li><input type="checkbox"/>Check box 5</li> 
    </ol>
</div>
<a class="button" href="#"><span>Show Check Box</span></a>

和jquery是，

 $('div#right-column-sidebar ol li:gt(0)').hide();
$('a.button').on("click", function() { 
    $('div#right-column-sidebar ol li:gt(0)').slideToggle(); 
});

我想要angularjs中的功能，在点击按钮时，该按钮应该切换并显示一个复选框列表。我应该在小提琴里做些什么改变？

Answer 1

点击按钮只需切换displayCheckBox的值即可。休息将由angularjs

处理

<div ng-show="displayCheckBox">
    <ol>
        <li><input type="checkbox"/>Check box 1</li>
        <li><input type="checkbox"/>Check box 2</li>
        <li><input type="checkbox"/>Check box 3</li>
        <li><input type="checkbox"/>Check box 4</li>
        <li><input type="checkbox"/>Check box 5</li> 
    </ol>
</div>

<a class="button" href="#" ng-click="displayCheckBox=!displayCheckBox"><span>Show Check Box</span></a>

的 Working Demo

如何在angularjs中单击按钮时显示复选框列表？

1 个答案: