Using the Ionic framework, I'm trying to create a group of three buttons that act as radio buttons:
If I click on Breakfast, I would like Lunch and Dinner to return to their normal (white) state, and Breakfast to turn Blue.
With my current code, I can't get this functionality to work, although I can get the buttons to switch color, slightly randomly (perhaps I just don't understand the ng-class
directive).
Here is my HTML code:
<div class="bar bar-subheader">
<div class="button-bar">
<a class="button" ng-class="{'button-positive' : !isActiveB, 'none': isActiveB}" ng-click="active('breakfast')">Breakfast</a>
<a class="button" ng-class="{'button-positive' : !isActiveL, 'none': isActiveL}" ng-click="active('lunch')">Lunch</a>
<a class="button" ng-class="{'button-positive' : !isActiveD, 'none': isActiveD}" ng-click="active('dinner')">Dinner</a>
</div>
</div>
My JS:
$scope.active = function(meal) {
switch (meal) {
case 'breakfast':
$scope.$broadcast('slideBox.setSlide', 0);
$scope.isActiveB = $scope.isActiveB;
$scope.isActiveL = !$scope.isActiveL;
$scope.isActiveD = !$scope.isActiveD;
break;
case 'lunch':
$scope.$broadcast('slideBox.setSlide', 1);
$scope.isActiveB = !$scope.isActiveB;
$scope.isActiveL = $scope.isActiveL;
$scope.isActiveD = !$scope.isActiveD;
break;
case 'dinner':
$scope.$broadcast('slideBox.setSlide', 2);
$scope.isActiveB = !$scope.isActiveB;
$scope.isActiveL = !$scope.isActiveL;
$scope.isActiveD = $scope.isActiveD;
break;
}
};
I can put the code in JSFidle if you require more information and a working solution.
Thanks for your help.
NOTE: I would like to maintain my active()
function, and use the ng-class
directive if possible, as I have a lot of other code dependent on this function.
A radio group is defined by giving each of radio buttons in the group the same name . Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.
RadioButton component can be enabled/disabled by giving disabled property. To disable RadioButton component, the disabled property can be set as true .
Defines a set of radio buttons, where only one button can be selected at a time. Each radio button group control has a property attribute that associates the group with a particular property. This property is defined elsewhere in the file and specifies the buttons that make up the group.
Maybe this simplified example will help you a little:
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.active = 'breakfast';
$scope.setActive = function(type) {
$scope.active = type;
};
$scope.isActive = function(type) {
return type === $scope.active;
};
});
<link rel="stylesheet" href="http://code.ionicframework.com/0.9.26/css/ionic.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl" class="bar bar-subheader">
<div class="button-bar">
<a class="button" ng-class="{'button-positive': isActive('breakfast')}" ng-click="setActive('breakfast')">Breakfast</a>
<a class="button" ng-class="{'button-positive': isActive('lunch')}" ng-click="setActive('lunch')">Lunch</a>
<a class="button" ng-class="{'button-positive': isActive('dinner')}" ng-click="setActive('dinner')">Dinner</a>
</div>
</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