[英]AngularJS - 3-button group acting as radio buttons
Using the Ionic framework , I'm trying to create a group of three buttons that act as radio buttons: 使用Ionic框架 ,我正在尝试创建一组三个按钮作为单选按钮:
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). 使用我当前的代码,我无法使用此功能,虽然我可以让按钮切换颜色,稍微随机(也许我只是不理解
ng-class
指令)。
Here is my HTML code: 这是我的HTML代码:
<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: 我的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. 如果您需要更多信息和工作解决方案,我可以将代码放在JSFidle中。
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. 注意:我想维护我的
active()
函数,并尽可能使用ng-class
指令,因为我有很多其他代码依赖于这个函数。
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>
Here is a more flexible solution for future Googlers. 这是针对未来Google员工的更灵活的解决方案。
Working plunker: http://plnkr.co/edit/U2Hvx4?p=preview 工作人员: http ://plnkr.co/edit/U2Hvx4?p = preview
.directive('barSelect',function($parse){
return {
restrict: 'A',
require: 'ngModel',
scope: {
model: '=ngModel',
value: '=barSelect'
},
link: function(scope, element, attrs, ngModelCtrl){
element.addClass('button');
element.on('click', function(e){
scope.$apply(function(){
ngModelCtrl.$setViewValue(scope.value);
});
});
scope.$watch('model', function(newVal){
element.removeClass('active');
if (newVal === scope.value){
element.addClass('active');
}
});
}
};
});
And a usage example: 一个用法示例:
<div class="button-bar">
<a bar-select="button.value"
ng-repeat="button in clientSideList"
ng-model="data.clientSide"
>{{button.text}}</a>
</div>
Here's another alternative approach which combines the other two here. 这是另一种替代方法,它将其他两种方法结合在一起。 It requires just a single <button-group> element with the following attributes:
它只需要一个具有以下属性的<button-group>元素:
. 。
.directive('buttonGroup',function($parse){
return {
restrict: 'E',
require: 'ngModel',
scope: {
model: '=ngModel',
buttons: '=',
buttonClass: '='
},
template: '<a class="group-btn {{buttonClass}}" ' +
' ng-repeat="button in buttons" ' +
' ng-class="{\'group-btn-active\': isActive(button.value)}" ' +
' ng-click="buttonClicked(button.value)"> ' +
' {{button.text}} ' +
'</a>',
controller: ['$scope', function($scope) {
$scope.buttonClicked = function(value) {
$scope.value = value;
};
$scope.isActive = function(value) {
return $scope.value === value;
};
}],
link: function(scope, element, attrs, ngModel) {
element.on('click', function(e){
scope.$apply(function(){
ngModel.$setViewValue(scope.value);
});
});
scope.$watch('model', function(newVal){
scope.value = newVal;
});
}
};
})
And the example usage: 以及示例用法:
<button-group ng-model="sortOrder" buttons="sortOptions"
button-class="'md-button my-other-class'"></button-group>
Where sortOptions would be an array of the form: 其中sortOptions是表单的数组:
$scope.sortOptions = [
{ value: 'priority', text: 'Priority' },
{ value: 'duration', text: 'Call Duration' }
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.