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

How to display list of checkboxes on button click in angularjs?

本文关键字：显示 复选框 列表 按钮 单击 angularjs      更新时间：2023-09-26

我指的是这个使用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 中的功能，在单击按钮时，按钮应该切换并显示复选框列表。我应该在小提琴中做哪些更改？

单击按钮时，只需将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>

工作演示

相关文章：