<!-- Container -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
" data-toggle="buttons" " tag does not allow the angular js to work properly as u can u see in this plnkr example too.. but if i remove then its working fine..
but i want ot keep it as it is..
http://plnkr.co/edit/l36UgnR7kltphXdEQLCk?p=preview
By hiding the radio buttons using the data-toggle="button" attribute on the btn-group, bootstrap is not allowing the click event to propagate down to the radio input. You can counter this effect by adding ng-click bindings to the .btn elements.
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary" ng-click="selection = 'option1'">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option2'">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option3'">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
PS. the reason you'll notice that clicking the top set of radio affects the bottom set is because they have the same name attribute. Change this as needed and you'll notice that each group works correctly/independently of the other
Because of same name for input this is happening.
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
http://plnkr.co/edit/chzO8o7gx2STGkyQ8SNK?p=preview
Related
Here is the code I'm using to try to render a group of button elements vertically.
<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 1
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
The trouble is the buttons are rendered side-by-side, instead. Am using bootstrap3.
The only way I have managed to get them to render vertically, is by including radio styles, which I want to avoid. And I want to use input fields so I can dynamically set/reset checked values. I will be using dom-selectors to alter the state of the radio group elements.
Can anyone offer some idea as to how to do this?
According to the docs on https://getbootstrap.com/docs/3.3/components/#btn-groups you should change your first line from
<div class="btn-group" ...
to
<div class="btn-group-vertical" ...
put the buttons inside a div block they will get vertically align
<div class="btn-group" data-toggle="buttons" style="width: 80%;background-color: grey;">
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option1"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option2"> Option 2
</label>
</div>
</div>
<div>
<div class="btn">
<label class="btn btn-warning">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
</div>
</div>
In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
I want validate to check whether all radio buttons are checked and move to next division. There are five radio button groups. When I clicked submit button validate that five radio button groups to check whether clicked or not
HTML FILE:
<div class="RatContent animated slideInRight" id="question1">
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col next">
<button type="submit" class="right">
<i style="color:black;" ng-click="openCity(event, 'question2' , 'question1')" class="ionicons ion-arrow-right-c"></i>
</button>
</div>
</div>
<!-- End content-->
</div>
JS FILE:
$scope.openCity = function(evt, cityName , Currentdiv) {
var i, x;
x = document.getElementsByClassName("RatContent");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var flag=0;
$("#"+Currentdiv).find("input[type='radio']").each(function(){
if($("input[type='radio']").is(':checked') == true ){
flag=1;
return false;
}
});
alert(flag);
if(flag==0){
document.getElementById(cityName).style.display = "block";
}
else{
alert("sfsdf");
}
}
You are using angular js library but not using ng-repeat directive. Create an array which is have radio structure example:
$scope.myArray = [
{
"header" : "First",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
},
{
"header" : "Second",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
}
]
In your html create rows and radios with ng-repeat :
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;" ng-repeat="data in myArray">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>{{data.header}}</h5>
</div>
</div>
</div>
<div class="col" ng-repeat="myRadio in data.radios">
<div class="row">
<div class="col">
<input type="radio" name="emotion" ng.model="myRadio" id="myRadio.id" class="input-hidden" required />
<label for="myRadio.id">
<i class="fa {{myRadio.icon}}"></i>
</label>
</div>
</div>
</div>
</div>
I'm not entirely sure if this is what you had in mind but check it out: http://codepen.io/Knollo/pen/EgXLaW
For the sake of simplicity I've modified your DOM somewhat.
HTML
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o">ok</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<button onclick="validateGroups()">submit</button>
CSS (scss)
.question {
margin: 10px 0;
padding: 20px 0;
border-bottom: 1px solid black;
&__title {
font-weigth: bold;
color: red;
margin: 0 0 10px;
}
}
Javascript
function validateGroups() {
$questions = $('.question');
$answeredQuestions = $questions.filter(checkForValidAnswer);
if ($answeredQuestions.length != $questions.length) {
alert('not all questions have been answered, yet.');
} else {
alert('all questions answered. proceeding...');
}
}
function checkForValidAnswer($index, question) {
// get all answers
$answers = $(question).find('.question__answer');
// try to find a checked answer
$selectedAnswer = $answers.find('input:checked');
// return false if no checked answer was found
if ($selectedAnswer.length < 1)
return false;
// true, otherwise
return true;
}
I have a list with checkbox values. My aim is to allow users to click on the whole coloured box for each value (i.e. the checkbox will mark when they click either the checkbox, the name, and the whole coloured box). I kinda achieved that but somehow the checkbox box shows up in the middle when hover over.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
Do this for a correct hover:
Remove the with: 100% from .checkbox :hover:
.checkbox :hover {
background-color: red;
cursor: pointer;
/* width: 100%; */
}
Note
Also keep in mind you should post different questions, when you really ahve different questions in SOF. Thus the question and its answers would be more usefull to the community.
Also here is not a place, people do thing for you. You should show some effort and let people help YOU solve it.
UPDATE 1
and add it to the label:
.checkbox label, .radio label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
I'm currently learning angular.js and I'm running into a problem. I'm listing radio buttons based on the items fetched from the database and when I click on any of them my model doesn't get updated. I added an input to test and the input update the model right away.
Any idea what i'm missing?
Update: it appears that the problem comes from bootstrap and the span wrapping the radio buttons. If I remove the spans the model gets updated
<div ng-repeat="question in questionnaire">
<div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
<span class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="false"> No
</span>
<span class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="true"> Yes
</span>
<input type="text" name="testEntry{{$index}}" ng-model="formData[$index]" />
</div>
{{formData}}
<span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
</div>
So it turns out that the problem was coming from the spans. I changed them to labels and it worked.
Here is the code:
<div ng-repeat="question in questionnaire">
<div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="false"> No
</label>
<label class="btn btn-primary">
<input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="true"> Yes
</label>
</div>
{{formData}}
<span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
<br /><br /><br />
</div>