Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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 ?

share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

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

share|improve this answer
 
That worked fine, thanks Satpal. –  Newbee Oct 4 at 14:52
add comment
up vote 1 down vote

This blog shows you to do ng-toggle in AngularJS:

http://geniuscarrier.com/ng-toggle-in-angular-js/

Here is one example:

http://jsfiddle.net/geniuscarrier/tKZjZ/
share|improve this answer
 
Thanks geniuscarrier, i will try this fiddle too. –  Newbee Oct 4 at 14:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.