Bind Bootstrap Radio Button To Angular Property - javascript

I am having troubles getting a bootstrap radio box selection to bind into an angular property.
Here is what I have, it is not working.
HTML BOOTSTRAP
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active">
<input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autocomplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label" class="btn btn-success ">
<input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autocomplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
ANGULAR JAVASCRIPT
var CurrencyInventoryBillController = function($scope, $http)
{
$scope.newItemType = "NOT SELECTED";
//TRIGGERED ON BUTTON CLICK. ALERT SHOWS 'NOT SELECTED' REGARDLESS OF WHICH RADIO BTN IS SELECTED
$scope.insertNewCurrencyItem = function()
{
alert($scope.newItemType);
}
}
Why is the VALUE and NG-MODEL directives not changing the SCOPE variable in this case?

I aborted trying to get the bindings to work, and went with another approach, changing the values in the angular scope via the ng-click method inline in the html
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" ng-click="newItemType='bill'" >
<input type="radio"> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" ng-click="newItemType='coin'" >
<input type="radio"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
Notice the ng-click event sets the newItemType to coin or bill. This approach is imperfect, but it works for now until someone can figure out how to bind radio buttons.

Can you try this
$scope.newItemType = 'bill';
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" >
<input type="radio" value="bill" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" >
<input type="radio" value="coin" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
Update: Here is the link to a fiddle

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
<input type="radio" value="bill" ng-model="newItemType" name="options">Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
<input type="radio" value="coin" ng-model="newItemType" name="options">Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<br/>
{{newItemType}}
</div>
</div>
You have it you just have to change your class active to actually see it.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
<input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autocomplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
<input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autocomplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<br/>
{{newItemType}}

Related

How to align input buttons vertically. Bootstrap3

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>

Update buttons-group checked state according to value in controller

I have buttons-group as filter like the following snapshot:
after selecting one, I update my filter object by calling a controller action.
The problem is, when I reload the page my buttons-group in view come back to initial state.
I'm new in web app programming, I don't know if I should use a html helper to linking the html components with filter model, or simply use a javascript onload event to populate my buttons-group. I already tested the last one but it doesn't work.
window.onload = function() {
document.getElementById("element2").checked = true;
}
<div id="session_group" class="filter-group">
<label for="session_group" class="control-label col-sm-3">Session </label>
<div class="btn-group user_toggle" data-toggle="buttons">
<label class="btn btn-default btn-large btn-info active">
<input type="radio" name="session_group_btn" id="element1" value="All" autocomplete="off">All
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element2" value="1" autocomplete="off">Automne
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element3" value="2" autocomplete="off">Automne A
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element4" value="3" autocomplete="off">Été
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element5" value="4" autocomplete="off">Été A
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element6" value="5" autocomplete="off">Printemps
</label>
<label class="btn btn-default btn-large btn-info">
<input type="radio" name="session_group_btn" id="element7" value="6" autocomplete="off">Printemps/Été
</label>
</div>
</div>
Thank you for your help.
To manually enable a button in the group, you need to use the Bootstrap button's toggle method $().button('toggle')
$(document).ready(function{
// Toggles push state. Gives the button the appearance that it has been activated.
$("#element2").parent().button('toggle');
});
Reference Link:
https://getbootstrap.com/docs/4.3/components/buttons/#checkbox-and-radio-buttons

Double clicking detected with jquery on click

I have a div like so
$('.btn-group label').unbind().click(function() {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
which has a bug, when I check the console result for a click I get two results false and true from this jquery function
how can I log only the valid one which is true?
On jsfiddle it's working however without double logging https://jsfiddle.net/8wtLc8b6/
Do with change event instead of click
$('.btn-group label').change(function(e) {
$(this).toggleClass('active');
var checked = $(this).find('input').prop('checked');
console.log(checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>
Why?
Change event run after the changes append in input
$('.btn-group label').change(function(){
console.log('change') //its run only on completely changed
}).click(function(e) {
console.log('click'); //its run before and after changing
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group pull-left" data-toggle="buttons" style="margin-right: 10px;">
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="selective-growth"> Expand from X
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="switch-color"> Switch Color
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="perspective"> Maintain Perspective
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="invert"> Invert
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" class="select-color"> Select Colors
</label>
</div>

Get attribute value with jQuery

I'm trying to get the attribute value in jQuery, but isn't working, My code reports undefined. Here is an example:
console.log($(".btn-causas input").find(".active input").attr('d'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert">Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike">Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow">I DON'T
</label>
</div>
The selector could be simply done like :
$(".btn-causas .active input").attr('d');
Hope this helps.
console.log( $(".btn-causas .active input").attr('d') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
The best way to do that is that you rename the attribute d for data-name and you can get very easy that value with this code:
Html:
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" data-name="dontknow">
Jquery:
var value = $('input[name="options"]:checked').data('name');
alert(value);
This is the best way to do that, this code retrieve the value of a checked input radio with the attribute data-name
Regards!
You don't have active class but as per my understanding you are trying to get selected radio buttons' attribute so try :checked on input
You're specifying wrong selector .btn-causas input, instead use this .btn-causas, See the code below:
Make jQuery find the inputs inside div - .btn-causas instead of finding it inside inputs, as you've done. Inputs doesn't contains a child elements, so you can't find elements inside it.
$(function() {
console.log($(".btn-causas").find(".active input").attr('d'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
</label>
<label class="btn btn-info ">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
</label>
<label class="btn btn-info active">
<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
</label>
</div>
Hope this helps!

AngularJS : binding radio buttons to ng-model with angular in ng-repeat

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>

Categories

Resources