for angular version 1.3.4. In the following snippet , the ng-change event does not work.
dependency: Bootstrap version 3.3.0
The below code works until version 1.2.27
var app = angular.module("demoApp", ['ngRoute']);
app.controller('DemoController', function ($scope) {
init();
function init() {
$scope.newItemType = 'bill';
$scope.change = function () {
alert($scope.newItemType)
};
}
});
app.config(function ($routeProvider) {
$routeProvider
.when('/prerak/list', {
controller: 'DemoController',
templateUrl: '/app/views/demo.html'
})
});
<h4>Demo</h4>
<br />
<div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio" value="bill" ng-change="change()" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success">
<input type="radio" value="coin" ng-change="change()" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<br/><br/> Selected Item: <b>{{newItemType}}</b>
</div>
Following is the plunkr (for the simpler version) : http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2
The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can pop up an alert when the button is clicked. Parameter Value: expression: It specifies when the particular element is clicked then the specific expression will be evaluated.
The ng-click directive tells AngularJS what to do when an HTML element is clicked.
The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope. You can specify that the binding should wait for a specific event to occur, or wait a specific number of milliseconds, and more, see the legal values listed in the parameter values below.
By setting the allowInvalid property to true, the model will still be updated even if the value is invalid.
You should not rely on Bootstrap javascript when you deal with Angular. Bootstrap's jQuery plugins are not tailored for Angular out of the box. If you want to use Bootstrap JS you should consider additional Angular modules like AngularUI Bootstrap or AngularStrap, which provide dedicated directives that implements corresponding Bootstrap plugins functionality.
Here is how it would look with AngularUI Bootstrap:
<div class="btn-group">
<label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
Remember to declare new dependency in this case:
angular.module("demoApp", ['ui.bootstrap'])
Here is how it will look all together
angular.module("demoApp", ['ui.bootstrap']).controller('DemoController', function ($scope) {
$scope.newItemType = 'bill';
$scope.change = function () {
console.log($scope.newItemType)
};
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<div class="container" ng-app="demoApp" ng-controller="DemoController">
<h2>Radio Buttons</h2>
<div class="btn-group">
<label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
Insert New Bill <span class="glyphicon glyphicon-file"></span>
</label>
<label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
</label>
</div>
<p>Selected Item: <b>{{newItemType}}</b></p>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With