javascript AngularJS - 充当单选按钮的 3 按钮组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22258570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - 3-button group acting as radio buttons
提问by Paolo Bernasconi
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-classdirective).
使用我当前的代码，我无法使用此功能，尽管我可以让按钮稍微随机地切换颜色（也许我只是不理解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-classdirective if possible, as I have a lot of other code dependent on this function.
注意：我想维护我的active()函数，并ng-class尽可能使用指令，因为我有很多其他代码依赖于这个函数。
回答by dfsq
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>Demo: http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=preview
演示：http: //plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=preview
回答by AgDude
Here is a more flexible solution for future Googlers.
这是为未来的 Google 员工提供的更灵活的解决方案。
Working plunker: http://plnkr.co/edit/U2Hvx4?p=preview
工作plunker：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>
回答by John Rix
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> 元素：
- ng-model
- buttons - array of objects containing 'text' and 'value' properties
- button-class - optional string containing CSS class(es) to apply to the rendered links, in addition to the default 'group-btn' and 'group-btn-active' classes
- ng模型
- 按钮 - 包含“文本”和“值”属性的对象数组
- button-class - 除了默认的“group-btn”和“group-btn-active”类之外，包含要应用于呈现链接的 CSS 类的可选字符串
.
.
.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' }
];
