wie generalize Bootstrap Toggle Auswahl mit Angular

Question

Ich benutze Bootstrap Toggle und Handhabung Auswahl in einer Funktion. In meiner Anwendung wird es viele Umschaltgruppen geben. Ich möchte doppelte Code entfernen und haben einen gemeinsamen Service/Fabrik, die Toggle-Auswahl für n Anzahl von Toggle behandeln wird.

Hier ist Link zu meinem PLUNKER.

Sie fragen sich vielleicht, was ist die Notwendigkeit, die Auswahl zu handhaben? weil basierend auf der Umschaltauswahl Änderungen in DOM vorgenommen werden. Einige Felder können basierend auf der Auswahl ausgeblendet werden.

Bitte beziehen Sie sich nicht auf eine Bibliothek von Dritten, helfen Sie mir beim Verständnis der Logik, wie dies getan werden kann.

Hier ist mein Code:

HTML

<div class="form-group" style="height: 50px;"> 
    <label class="control-label col-md-4 col-sm-4 col-xs-4">NUMERIC VALUE</label> 

    <div class="col-md-6 col-sm-6 col-xs-6"> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.sharedService.numericValue === '111'}" ng-click="vm.selectNumericValue('111')"> 
      111 
     </button> 
     <button type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.sharedService.numericValue === '222'}" ng-click="vm.selectNumericValue('222')"> 
      222 
     </button> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-md-4 col-sm-4 col-xs-4">ALPHABETICAL VALUE</label> 

    <div class="col-md-6 col-sm-6 col-xs-6"> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')"> 
      AAA 
     </button> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')"> 
      BBB 
     </button> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')"> 
      CCC 
     </button> 
     </div> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label class="control-label col-md-4 col-sm-4 col-xs-4">Mix VALUE</label> 

    <div class="col-md-6 col-sm-6 col-xs-6"> 
     <div class="btn-group"> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'A1'}" ng-click="vm.selectMixValue('A1')"> 
      A1 
     </button> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'B1'}" ng-click="vm.selectMixValue('B1')"> 
      B1 
     </button> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'C1'}" ng-click="vm.selectMixValue('C1')"> 
      C1 
     </button> 
     <button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'D1'}" ng-click="vm.selectMixValue('D1')"> 
      D1 
     </button> 
     </div> 
    </div> 
    </div> 

JS

function selectNumericValue(numValue) { 
    vm.sharedService.numericValue = numValue; 
    } 


    function selectAlphaValue(alphaValue) { 
    vm.sharedService.alphaValue = alphaValue; 
    } 

    function selectMixValue(mixValue) { 
    vm.sharedService.mixValue = mixValue; 
    } 

Answer 1

Ich würde eine Richtlinie für diese. Sie können Ihre Schaltflächengruppen basierend auf einer allgemeinen ng-model-Zuweisung organisieren.

Sie sagen, dass Sie nicht auf Bibliotheken von Drittanbietern verweisen, aber Tatsache ist, dass das, was Sie beschreiben, bereits erledigt wurde. Wenn es Ihr Ziel ist zu lernen, können Sie zumindest sehen, wie andere es getan haben und es auf Ihre eigene Weise tun, obwohl warum das Rad neu erfinden?

Ich empfehle, dass Sie auf den Quellcode für UI Bootstrap Schaltflächen Anweisungen verweisen, insbesondere die uib-btn-radio Richtlinie. Dies tut genau das, was du beschrieben hast.