使用AngularJS或Javascript在选择列表中创建复选框

时间:2020-12-11 22:56:28

I am looking for a multi select checkbox solution similiar to this one: http://blog.cbolson.com/mooselect-select-list-2-sliding-checkbox-list/

我正在寻找一个与此类似的多选复选框解决方案:http://blog.cbolson.com/mooselect-select-list-2-sliding-checkbox-list/

I am NOT looking for something n JQuery, so please no JQuery answers. Dos this already exist in AngularJS or raw Javascript or what is some guidance on how to make something like this?

我不是在寻找JQuery的东西,所以请不要JQuery的答案。这已经存在于AngularJS或原始Javascript中,或者有关如何制作这样的东西的一些指导?

2 个解决方案

#1


2  

it's just custom component that you can create yourself, nothing complex. it's more about html-markup, but not javascript.

它只是您自己创建的自定义组件,没有任何复杂。它更多的是关于html-markup,而不是javascript。

For example AngularJS solution:

例如AngularJS解决方案:

<div ng-controller="main">
    <div ng-click="toggle()"> {{count}} options selected</div>  
<div ng-show="showOptions">
    <label ng-repeat="option in options">{{option}}<input type="checkbox" ng-model="selected[$index]" ng-change="update()"/><br/></label>
  </div></div>

http://jsfiddle.net/STEVER/mhb2p/

#2


0  

I think you can use some libraries for this. This is dropdown-check-list one which you can use.

我认为你可以使用一些库。这是您可以使用的下拉 - 检查列表。

You can also find the test cases here.

您也可以在此处找到测试用例。

#1


2  

it's just custom component that you can create yourself, nothing complex. it's more about html-markup, but not javascript.

它只是您自己创建的自定义组件,没有任何复杂。它更多的是关于html-markup,而不是javascript。

For example AngularJS solution:

例如AngularJS解决方案:

<div ng-controller="main">
    <div ng-click="toggle()"> {{count}} options selected</div>  
<div ng-show="showOptions">
    <label ng-repeat="option in options">{{option}}<input type="checkbox" ng-model="selected[$index]" ng-change="update()"/><br/></label>
  </div></div>

http://jsfiddle.net/STEVER/mhb2p/

#2


0  

I think you can use some libraries for this. This is dropdown-check-list one which you can use.

我认为你可以使用一些库。这是您可以使用的下拉 - 检查列表。

You can also find the test cases here.

您也可以在此处找到测试用例。