Перемешать div с angularJS

0

Я создаю приложение с ионным и я ищу способ перетасовать divs каждый раз, когда пользователь загружает экран. Я не использую ng-repeat, есть ли другой способ переупорядочить некоторые divs при обновлении?

Любая помощь очень ценится!

Один div выглядит так:

<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>

И я хотел бы переупорядочить их все.

  • 0
    Можно ли поделиться шоу-кодом, чтобы мы могли видеть, как вы строите свою страницу?
  • 0
    вы не предоставили достаточно информации, чтобы предложить полное решение, но из того, что вы описываете, эти div не генерируются angular, поэтому angular не будет участвовать в этой операции случайного воспроизведения, если вы не напишете пользовательскую директиву для возьмите на себя рендеринг этих предметов. Вы можете использовать обычный javascript или любую другую библиотеку javascript для выполнения этой задачи, и это не должно влиять на angular.
Показать ещё 1 комментарий
Теги:
ionic-framework

2 ответа

1
Лучший ответ

Я просто придумал это решение и на самом деле не работал над этим, просто чтобы дать вам представление!

Здесь у нас есть директива:

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);
        })
    }
})

и вот шаблон:

<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>

что делает эта директива? Он просто собирает все div внутри элемента, к которому я применил свою директиву, и перетасовал те divs, перетасовывал их и менял, использовал $compile команду $compile для компиляции с scope и устанавливал содержимое внешнего div в перетасованный скомпилированный храм.

Если вы нажмете на внешнее погружение, вы увидите, что его содержимое перетасовано.

Поделиться
  • 0
    Большое спасибо!
  • 0
    Как я могу изменить его, чтобы он работал при загрузке страницы? Теперь это по щелчку элемента. Спасибо :)
Показать ещё 1 комментарий
0 
   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]);
     }
   }
}

Это перетасовывает дочерние элементы любого div с идентификатором idID, который вы передаете.

Вы можете использовать его как таковой:

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

Адаптировано из: http://jsfiddle.net/C6LPY/2/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню