Hi,
I want to show checkboxes in a dropdown html control. I am binding data using angularjs.
This type of control is not available in html. So I have created a div and applied styling to it to look like a dropdown.
Using ng-repeat, I am able to create checkboxes inside it.
When a user checks a checkbox, its text is stored in database on button click.
What I want it, when page loads, the respective checkboxes should get checked whose values we stored in database.
Here is the HTML:
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li class="floatLeft widthFull" data-ng-repeat="code in MultipleRhythm">
<label class="floatLeft"> <input type="checkbox" class="floatLeft multiCheckbox" value="{{code.Name}}" />{{code.Name}}</label>
</li>
</ul>
</div>
</dd>
</dl>
Here is js:
$scope.MultipleRhythm = $scope.ManagerCollection["Multiple Rhythm"]["Multiple Rhythm"];
This gives me a collection to loop through using ng-repeat
$scope.SelectedMultipleRhythm = $filter('GetMultiSelectedOptions')($scope.MultipleRhythm, $scope.ManagerCollection["SelectedMultipleRhythm"]);
This gives values selected by user which come from db. This is comma separated.
If user has selected 3 values, I want to show those three checkboxes checked.
What I have tried:
I tried using ng-if, ng checked that if the code.Name == SelectedMultipleRhythm, then show checkbox checked. But no luck.