Try it
Javascript
Jquery
Angular
Learn Angular
Learn Javascript
Learn Bootstrap
Learn jQuery
angular-bootstrap-4
In this example of angular bootstrap, there are two radio buttons both are bind with scope variable gender having different value 'male' and 'female'. Change function will show the result in html. See the code snippet:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome in the AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div ng-controller="bootstrapController"> <div class="container"> <div class="col-md-3 well" ng-init="count=0"> Male: <input type="radio" ng-model="gender" value="Male" ng-change="layout(gender)" /> Female: <input type="radio" ng-model="gender" value="Female" ng-change="layout(gender)" /> <pre><b>Changed</b> {{result}} </pre> </div> </div> </div> </body> </html> <script> var app = angular.module("app", []); app.controller('bootstrapController', ['$scope', function ($scope) { $scope.layout = function (gender) { $scope.result = gender; } }]); angular.bootstrap(document, ['app']); </script>
Output
×
Save This try
Title
Description
In this example of angular bootstrap, there are two radio buttons both are bind with scope variable gender having different value 'male' and 'female'. Change function will show the result in html. See the code snippet:
