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

Question

I am referring to this fiddle http://jsfiddle.net/9HXzW/55/ which is written using Jquery.

The code in HTML is,

<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>

and the jquery is,

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

I want the functionality in angularjs where on clicking a button, the button should toggle and display a list of checkboxes. What changes should i make in the fiddle ?

Answer 1

On click of button just toogle the value of displayCheckBox . Rest will be handled by 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