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>
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>
I had a drop-down for gender single-select: Male/Female
However, our designer wanted to spice it up and turn drop-down into buttons like this:
How can I implement these buttons in Javascript/React where clicking on one button highlights it and then it unhighlights the opposite button?
I learned that Bootstrap has this functionality as long as you include the data-toggle="buttons" in the top div.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option A
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" autocomplete="off"> Option B
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option C
</label>
</div>
<!-- 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
I have these buttons inside a form. How can I know which ones were selected when the user submits the form?
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<input type="submit value="submit"></input>
</form>
Your button group is a bootstrap style group and means nothing on the server side.
Your inputs will need to be named in order to produce a value from the form's postback.
<form action="/">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input name="check1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input name="check2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input name="check3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
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}}