Bind Bootstrap Radio Button In Angular Property
I am having trouble getting the botstrap box selection to bind to an angular property.
Here's what I have, it doesn't work.
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 don't the VALUE and NG-MODEL directives change the SCOPE variable in this case?
+3
source to share
3 answers
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 the fiddle
+1
source to share
I aborted trying to get the bindings to work and went with a different approach, changing the values in the angular scope with the ng-click inline method in 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>
Note that the ng-click event sets the newItemType to coin or account. This approach sucks in the back balls, but now it works until someone can figure out how to wire the switches.
+3
source to share
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 need to change your class active
to 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}}
+1
source to share