web-dev-qa-db-ja.com

AngularJS-ラジオボタンとして機能する3ボタングループ

Ionicフレームワーク を使用して、ラジオボタンとして機能する3つのボタンのグループを作成しようとしています。

button-group picture

朝食をクリックすると、昼食と夕食が通常の（白）状態に戻り、朝食が青に変わります。

現在のコードでは、この機能を動作させることはできませんが、ボタンの色を少しランダムに切り替えることはできます（おそらく、_ng-class_ディレクティブを理解していません）。

これが私の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>
_

私の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;
 }
};
_

より多くの情報と実用的なソリューションが必要な場合は、コードをJSFidleに入れることができます。

ご協力いただきありがとうございます。

注：この関数に依存する他のコードがたくさんあるので、active()関数を維持し、可能であれば_ng-class_ディレクティブを使用したいと思います。

javascriptangularjsbuttonradio-buttonionic-framework
15
Paolo Bernasconi

たぶん、この単純化された例はあなたを少し助けるでしょう：

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>

デモ： http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=preview

26
dfsq

これは、将来のGoogle社員向けのより柔軟なソリューションです。

作業プランカー： 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');
        }
      });
    }
  };
});

そして使用例：

   <div class="button-bar">
     <a bar-select="button.value"
        ng-repeat="button in clientSideList"
        ng-model="data.clientSide"
     >{{button.text}}</a>
   </div>
6
AgDude

ここに他の2つを組み合わせた別の代替アプローチがあります。次の属性を持つ単一の<button-group>要素のみが必要です。

  • ng-model
  • ボタン-「text」および「value」プロパティを含むオブジェクトの配列
  • 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;
            });
        }
    };
})

そして使用例：

<button-group ng-model="sortOrder" buttons="sortOptions" 
    button-class="'md-button my-other-class'"></button-group>

ここで、sortOptionsは次の形式の配列になります。

$scope.sortOptions = [
        { value: 'priority', text: 'Priority' },
        { value: 'duration', text: 'Call Duration' }
    ];
0
John Rix