Shuffle divs mit angularJS

Ich baue eine App mit ionischen und ich suche eine Möglichkeit, divs jedes Mal mischen, wenn der Benutzer den Bildschirm lädt. Ich benutze nicht ng-repeat, gibt es eine andere Möglichkeit, einige Divs bei einer Aktualisierung neu zu ordnen?Shuffle divs mit angularJS

Jede Hilfe sehr geschätzt!

Ein div sieht wie folgt aus:

<div class="barock center"> 
    <div class="inner"> 
    <h1>BAROCK</h1> 
    <h4>Bester Kaffee der Stadt</h4> 
    <img src="img/home/open.png" alt=""> 
    </div> 
</div>

Und ich möchte alle von ihnen neu zu ordnen.

Quelle

2016-07-27 olivier

Würde Ist es möglich, den Show-Code zu teilen, damit wir sehen können, wie Sie Ihre Seite erstellen? –

Sie haben nicht genügend Informationen angegeben, um eine vollständige Lösung zu bieten, aber nach dem, was Sie beschreiben, werden diese divs nicht durch eckige generiert, so dass angular nicht in diese shuffle-Operation einbezogen wird, es sei denn, Sie schreiben eine benutzerdefinierte Anweisung Übernahme dieser Elemente übernehmen. Sie können diese Aufgabe jedoch auch mit plain javascript oder einer anderen Javascript-Bibliothek ausführen. – Claies

Danke @Claies! – olivier

Ich bin gerade mit dieser Lösung gekommen, und habe nicht wirklich daran gearbeitet, nur um Ihnen eine Idee zu geben!

Hier haben wir eine Richtlinie:

var app = angular.module('app', []) 
.controller("MainController", function(){}); 

app.directive('reorderDiv', function ($compile) { 
    return function (scope, elem, attrs) { 

     function shuffle(array) { 
      var currentIndex = array.length, temporaryValue, randomIndex; 

      // While there remain elements to shuffle... 
      while (0 !== currentIndex) { 

       // Pick a remaining element... 
       randomIndex = Math.floor(Math.random() * currentIndex); 
       currentIndex -= 1; 

       // And swap it with the current element. 
       temporaryValue = array[currentIndex]; 
       array[currentIndex] = array[randomIndex]; 
       array[randomIndex] = temporaryValue; 
      } 

      return array; 
     } 
     elem.on('click', function() { 

      console.log('called'); 
      var divs = elem.find('div'); 
      console.log(divs); 

      divs = shuffle(divs); 
      var content = $compile(divs)(scope); 
      elem.append(content); 
     }) 
    } 
})

und hier ist die Vorlage:

<html ng-app="app"> 
    <head> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainController"> 
    <div reorder-div> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
     <div>4</div> 
    </div> 
    </body> 
</html>

was bedeutet diese Richtlinie tun? Es sammelt nur alle divs innerhalb des Elements, das ich meine Direktive angewendet habe und mische diese, mische sie und ändere die, benutze $compile Service, um es gegen die scope zu kompilieren, und setze den Inhalt der äußeren div auf den gemischten Tempel.

Wenn Sie auf den äußeren Tauchgang klicken, werden Sie sehen, dass der Inhalt gemischt ist.

Quelle

2016-07-27 15:26:05 Rachmaninoff

Vielen Dank! – olivier

Wie kann ich es ändern, damit es beim Laden der Seite ausgeführt wird? Jetzt ist es auf Element klicken. Danke :) – olivier

@olivier Ich weiß es nicht :). Haben Sie versucht, 'click' Handler direkt in Link-Funktion zu setzen? – Rachmaninoff

function shuffleChildren(parentID) { 
    var id = "#" + parentId; 
    var parent = angular.element(id); 
    var divs = parent.children(); 
    while (divs.length) { 
     parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]); 
    } 
    } 
}

Dadurch werden die Kinder jeden div mit id parentID, die Sie in geben mische

Sie es als solches nutzen könnten.

angular.element(document).ready(function() { 
     shuffleChildren(parentID); 
    });

Übernommen aus: es http://jsfiddle.net/C6LPY/2/

Quelle

2016-07-27 15:39:49

Shuffle divs mit angularJS

Antwort

Verwandte Themen