Reversalible Funktion für Farben in AngularJS

Question

Swapping habe ich eine Funktion, die ein Array von Farben zurück:

default: function() { 

    // Get our colours array 
    var colours = [service.kits.kit.colour1, service.kits.kit.colour2, service.kits.kit.colour3]; 

    // If our third colour is blank 
    if (!colours[2]) { 

     // Is our first or second colour white 
     var isWhite = colours[0] === 'ffffff' || colours[1] === 'ffffff'; 

     // Set our thrid colour 
     colours[2] = isWhite ? 'a6a6a6' : 'ffffff'; 
    } 

    // Return our colours 
    return colours; 
}, 

die ich dann wie folgt verwenden:

// Checks to see what colour was selected for Colour 1 and 2 and sets the 3rd colour 
var setSelectedColours = function() { 

    // Get our default colours 
    var colours = service.colours.default(); 

    // Apply to our selected colours 
    service.colours.selected = angular.copy(colours); 
    service.colours.selectedLeisure = angular.copy(colours); 
}; 

Ich habe eine Richtlinie, die ich nutzen, um Tauschen Sie Farben aus, die wie folgt aussehen:

.directive('colourSwapper', function() { 

    return { 
     restrict: 'A', 
     controller: 'ColourSwapperController', 
     link: function (scope, element, attrs, controller) { 

      // Get to see if we are working with the leisure colours or not 
      var leisurewear = attrs.hasOwnProperty('leisurewear'); 

      // Create our function 
      element.bind('click', function (e) { 

       // Apply the scope 
       scope.$apply(function() { 

        // Use the algorithm for leisurwear items 
        controller.swapColours(leisurewear); 
       }); 

       // Prevent any other actions 
       e.preventDefault(); 
      }); 
     } 
    }; 
}) 

ziemlich gerade so weit. Die Funktion für die Farben tauschen in meinem Controller gehalten wird, wie folgt aus:

.controller('ColourSwapperController', ['ConfiguratorService', function (shared) { 
    var self = this; 

    // Assign our private properties 
    var defaultColours = shared.colours.default(), 
     tempColour, 
     leisureColour = '000e31', 
     leisureColours = [leisureColour, '001444']; 

    // Used to swap the colours for a garment 
    self.swapColours = function (leisurewear) { 

     // Get our colours 
     var colours = leisurewear ? shared.colours.selectedLeisure : shared.colours.selected; 

     // If we are leisurewear and colour 1 and 2 are not navy and we don't have a temp colour 
     if (leisurewear && leisureColours.indexOf(defaultColours[0]) === -1 && leisureColours.indexOf(defaultColours[1]) === -1 && !tempColour) { 

      // Assign our first colour to our temp colour 
      tempColour = colours[0]; 

      // Make our first colour our 
      colours[0] = leisureColour; 

      // If we are playingwear or we have a tempColour 
     } else { 

      // If we have a tempColour 
      if (tempColour) { 

       // Set our first colour to our tempColour 
       colours[0] = tempColour; 

       // Reset our tempColour 
       tempColour = null; 
      } 

      // If our last colour is the hightlight colour and we have not swapped, and our first colour is not the same as our second colour 
      if (colours[2] === defaultColours[2] && colours[0] === defaultColours[0] && defaultColours[0] !== defaultColours[1]) { 

       // Get colour 1 
       var c1 = colours.shift(); 

       // Move it to the middle 
       colours.splice(1, 0, c1); 

       // If our last colour is our highlight colour and we have already swapped 
      } else if (colours[2] === defaultColours[2]) { 

       // Get our highlight colour 
       var h1 = colours.pop(); 

       // Move it to the middle 
       colours.splice(1, 0, h1); 

       // If our highlight colour is in the middle and our first colour is actually our second colour, and we our first colour is not the same as our second colour 
      } else if (colours[1] === defaultColours[2] && colours[0] === defaultColours[1] && defaultColours[0] !== defaultColours[1]) { 

       // Get colour 1 and 2 
       var c1 = colours.pop(); 
       var c2 = colours.shift(); 

       // Swap our colours 
       colours.splice(0, 0, c1); 
       colours.push(c2); 

       // If our hightlight colour is in the middle and our first colour is in the original place, move our hightlight colour back to the last position 
      } else if (colours[1] === defaultColours[2]) { 

       // If we have a tempColour 
       if (tempColour) { 

        // Set our first colour to our tempColour 
        colours[0] = tempColour; 

        // Reset our tempColour 
        tempColour = null; 
       } 

       // Get colour 2 
       var c2 = colours.pop(); 

       // Insert c2 into the middel 
       colours.splice(1, 0, c2); 
      } 
     } 
    }; 
}]) 

Nun, dies ist ein bisschen komplizierter. Es gibt 3 Farben, sie können so angeordnet werden, dass Farbe 3 nur in Position 1 und 2 sein kann, aber Farbe 1 und 2 können in jeder Position sein.

Wenn die Farben für Freizeitkleidung sind, gilt die gleiche Regel aber eine andere Farbe wird zwischen jedem Schritt an Position 0 geworfen (es sei denn, diese Farbe wurde bereits gewählt und befindet sich in Position 1 oder 2).

Meine Funktion funktioniert gut, aber sie ist linear, wenn eine Taste gedrückt wird, wird sie immer in eine Richtung gehen. Ich möchte, dass es in zwei Richtungen geht, also gibt es einen Vor- und Zurück-Knopf, der die Funktion umkehrt.

Weiß jemand wie ich das zu meiner jetzigen Funktion machen kann?

Answer 1

machen ein Array, das die Farben

var colorsOrderSet=[]; 

sequenzieren speichert, wenn Sie die

var colorChangeNumber = 0; 

Schaltfläche klicken, wenn er darauf klickt

die Informationen in einem Array gespeichert werden sollte

colorsOrderSet[colorChangeNumber] = colours; 

und dann erhöhen Sie es um eins, so dass es die Nummer

speichern wird

colorChangeNumber++; 

die zurückgehen Funktion wird Onclick

ColorChangeNumber--; 
colorsOrderSet[colorChangeNumber] = colours;