AngularJS - 3按钮组充当单选按钮 [英] AngularJS - 3-button group acting as radio buttons

问题描述

使用离子框架，我试图创建一组充当单选按钮三个按钮：

如果我点击早餐，我想午餐和晚餐回到其正常的（白色）状态，早餐要变成蓝色。

使用我目前的code，我不能让此功能工作，虽然我可以得到按钮切换颜色，稍微随机（也许我只是不明白的 NG-类指令）。

下面是我的HTML code：

 ＆LT; D​​IV CLASS =酒吧酒吧副标题＆GT;
 ＆LT; D​​IV CLASS =按钮栏＆GT;
   ＆LT;一类=按钮NG-CLASS ={按钮阳性'：isActiveB，'无'：isActiveB}NG点击=激活（'早餐'）＆GT;早餐和LT; / A＆GT;
   ＆LT;一类=按钮NG-CLASS ={按钮阳性'：isActiveL，'无'：isActiveL}NG点击=激活（'午餐'）＆GT;午餐＆LT; / A＆GT;
   ＆LT;一类=按钮NG-CLASS ={按钮阳性'：isActiveD，'无'：isActiveD}NG点击=激活（'晚餐'）＆GT;晚餐＆LT; / A＆GT;
 ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我的JS：

  $ scope.active =功能（粕）{ 开关（粕）{
   案早餐：
     。$范围$广播（'slideBox.setSlide'，0）;
     $ scope.isActiveB = $ scope.isActiveB;
     $ scope.isActiveL = $ scope.isActiveL！;
     $ scope.isActiveD = $ scope.isActiveD！;
     打破;
   案午餐：
     。$范围$广播（'slideBox.setSlide'，1）;
     $ scope.isActiveB = $ scope.isActiveB！;
     $ scope.isActiveL = $ scope.isActiveL;
     $ scope.isActiveD = $ scope.isActiveD！;
     打破;
   案晚餐：
     。$范围$广播（'slideBox.setSlide'，2）;
     $ scope.isActiveB = $ scope.isActiveB！;
     $ scope.isActiveL = $ scope.isActiveL！;
     $ scope.isActiveD = $ scope.isActiveD;
     打破;
 }
};
 

我可以把code在JSFidle如果您需要了解更多信息和工作方案。

感谢您的帮助。

---

请注意：我想保持我的激活（）功能，并使用纳克级指令，如果可能的话，因为我有依赖于这个功能很多其他code的。

解决方案

也许这简单的例子可以帮助你一点：

\r

\r

angular.module（'plunker'，[]）。控制器（'MainCtrl ，功能（$范围）{\r
    $ scope.active ='早餐';\r
    $ scope.setActive =函数（类型）{\r
        $ scope.active =类型;\r
    };\r
    $ scope.isActive =函数（类型）{\r
        返回类型=== $ scope.active;\r
    };\r
}）;

\r

＆LT;链接rel =stylesheet属性HREF =HTTP：// code.ionicframework.com / 0.9.26 / CSS / ionic.min.css＆GT;\r
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.13/angular.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; D​​IV NG-应用=plunkerNG控制器=MainCtrl级=酒吧酒吧副标题＆GT;\r
    ＆LT; D​​IV CLASS =按钮栏＆GT;\r
        ＆LT;一类=按钮NG-CLASS ={按钮阳性'：isActive（'早餐'）}NG点击=SETACTIVE（'早餐'）＆GT;早餐和LT; / A＆GT;\r
        ＆LT;一类=按钮NG-CLASS ={按钮阳性'：isActive（'午餐'）}NG点击=SETACTIVE（'午餐'）＆GT;午餐＆LT; / A＆GT;\r
        ＆LT;一类=按钮NG-CLASS ={按钮阳性'：isActive（'晚餐'）}NG点击=SETACTIVE（'晚餐'）＆GT;晚餐＆LT; / A＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

演示：<一href=\"http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=$p$pview\">http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=$p$pview

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.

解决方案

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

这篇关于AngularJS - 3按钮组充当单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！