Question

我正在构建一个带有离子的应用程序，每次用户加载屏幕时，我都会搜索一种方式来重新调整div。我不使用ng-repeat，还有其他方法可以在刷新时重新排序某些div吗？

任何帮助非常感谢！

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

我想重新排序所有这些。

Answer 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并对这些div进行洗牌，将它们改组，并使用$compile服务对scope进行编译，并设置外部div的内容到了洗牌的寺庙。

如果您点击外部潜水，您将看到其内容被洗牌。

Answer 2

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

这将使你传入的id parentID的任何div的子进行随机播放。

你可以这样使用它：

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

改编自：http://jsfiddle.net/C6LPY/2/

使用angularJS随机播放div

2 个答案: