I'm trying to put a radio button on each of my list elements as you can see here.
<ul class="list-group">
<li class="list-group-item" ng-repeat="player in vm.players">
{{player.name}}
<span class="pull-right">
<input type="radio" name="gender"value="player.name">
</span>
</li>
</ul>
I hope basically to show a list of player's name and you can select some with a radio button, but they don't seem to allow you to click them.
Thanks,
As #Dimodi suggests, if you want text to be associated with a clickable form input like a checkbox or radio button, you must associate them using a <label>. For example, either of:
<label><input...> some text</label>
<input id="foo"...> <label for="foo">some text</label>
Just bind label for attribute with radio's id.
Or
Simply placed radio inside particular label.
<ul class="list-group">
<li class="list-group-item" ng-repeat="player in vm.players">
<label> {{player.name}}
<input type="radio" name="gender"value="player.name">
</label>
<label for="plys"> {{player.name}} </label>
<input type="radio" id="plys" name="gender"value="player.name">
</li>
</ul>
Related
I'm using MultipleSelect as it is a good option for the inconvenient handling of multiple options in a normal select. Due to optical reasons i'm using it also for normal single selects.
The problem is now, that it's converting a select into a list of radio buttons. In my case i have an option in a select, that must be enabled by a separate checkbox. When i address it to the normal select, the option is enabled, but not the radio in the list. But these options also don't have an id, so that I could change the radio directly.
This is the code that is generated for the select. The second option is disabled and should be enabled.
<div class="ms-parent multiple-select" title="" style="width: 300px;">
<button type="button" class="ms-choice">
<div class="icon-caret open"></div>
</button>
<div class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class=" hide-radio ">
<label class="">
<input type="radio" value="" data-key="option_0" data-name="selectItemstatus">
<span>status red</span>
</label>
</li>
<li class=" hide-radio ">
<label class="disabled">
<input type="radio" value="105" data-key="option_1" data-name="selectItemstatus" disabled="disabled">
<span>status green</span>
</label>
</li>
</ul>
</div>
In the documentation i only found how to enable/disable a complete select, but not a single option. Anybody have an idea how to enable the radio button?
Just disable the option on the original select element - and then use the refresh method.
Details on usage can be found here,
http://multiple-select.wenzhixin.net.cn/examples#refresh.html
http://multiple-select.wenzhixin.net.cn/docs/en/methods#refresh
Using angular, it happens that this 2 things have a very different behaviour:
<li ng-repeat="client in ctrl.client_list">
<a tabindex="0">
<label class="checkbox">
<input type="checkbox"
ng-change="console.log(this.checked)"
ng-model="client.checked">
{{client.name}}
</label>
</a>
</li>
And:
<li ng-repeat="client in ctrl.client_list">
<label class="checkbox">
<input type="checkbox"
ng-change="console.log(this.checked)"
ng-model="client.checked">
{{client.name}}
</label>
</li>
The only difference is presence of that <a> tag. The page is not reloading and model seems to be attached but it doesn't change on click.
Can someone explain me why this happens?
I've searched for a while and did find a lot about multiple iterations. The problem is that i don't see a plain solution for my problem.
I have a list of checkbox that is filled dinamically with ng-repeat. Due to layout purposes i need to create a new div inline-block whenever i reach 3 checkboxes. Like that:
CheckBoxList = {1,2,3,4,5}
<div class="form-group-content">
<div class="form-col-secondary">
<ul class="list-checkboxes">
<li>
<input type="checkbox"/>1
</li>
<li>
<input type="checkbox"/>2
</li>
<li>
<input type="checkbox"/>3
</li>
</ul>
</div>
<div class="form-col-secondary">
<ul class="list-checkboxes">
<li>
<input type="checkbox"/>4
</li>
<li>
<input type="checkbox"/>5
</li>
</ul>
</div>
</div>
I tried using a iterator and two ng-repeat but didn't work like i wanted to.
If somebody already had this struggle and could help i would appreciate it.
To achieve this you will have to make 2 updates.
2 ng-repeat
Change structure
HTML Code
<div class="form-group-content">
<div class="form-col-secondary" ng-repeat="block in blocks">
<ul class="list-checkboxes">
<li ng-repeat="checkbox in block">
<input type="checkbox{{$index + 1}}"/>
</li>
</ul>
</div>
</div>
JS Code
$scope.blocks = [
['1','2','3'],
['4','5']
];
Here is a plunker for you - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=preview
If you split your CheckBoxList in parts of 3, you can use your ng-repeat on each div.
So change checkboxlist to something like:
divs = [[1,2,3],[4,5,6]];
then your html:
<div class="form-col-secondary" ng-repeat="div in divs">
<ul class="list-checkboxes">
<li ng-repeat="checkbox in div">
<input type="checkbox" ng-attr-id="{{checkbox}}">
</li>
</ul>
</div>
This might nog exactly match what you want as result, but it reflects the principle on which you should be able to create your own working version :-)
Edit
Worth noting: As far as I am aware, you can't have <input type="checkbox1" />, I think you mean <input type="checkbox" id="1" name="checkbox1" /> instead.
You'll have to track by $index in your ng-repeat and either ng-if or ng-show and $index < 3 for your first set and $index > 2 for the second set.
I have a list of user-details stored in userList.
I am rendering these list of users in a div tag as follows:
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
Now Problem occurs If same userList is used to render users in multiple div tags.
i.e.
<div class="1">
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
</div>
<div class="2">
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
</div>
Now If two users are selected/checked in div1, it gets reflected in div2 as well since view.userList is getting updated.
One way to solve it is clone userList and assign cloned userList` to div1 and userList`` to div2.
But that is causing me performance issues If I load more than 15 or 20 divs.
Is there any way we can avoid selecting a user in one div not reflecting in another?
Thanks in Advance
I have a website where I want to be able to click on a button and have a dropdown or a bubble. Something that looks like the drop from this fiddle.
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
Although I know that this is just a dropdown menu, I'd like mine to be able to have a list of checkmarks where you can tick some options on and off.
Does anyone know a tool or similar that I can use to create this?
The ul with a class drop down-menu should be able to be replaced by about any element... not necessary just a list. However, to answer the question, you should be able to place any form elements you want in there, such as this...
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
</ul>
</div>
And a demo here: DEMO