私はionicでアプリを構築していますが、ユーザーが画面を読み込むたびにdivをシャッフルする方法を探します。私はng-repeatを使用しません。リフレッシュ時にdivを並べ替えるもう1つの方法はありますか？angularJSのシャッフル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>
そして、私はそれらのすべてを並べ替えしたいと思います。
私はちょうどあなたにアイデアを与えるために、このソリューションを思いついて、本当にそれに取り組んでいない！
ここでは、ディレクティブを持っている：
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をシャッフルし、シャッフルして変更します。$compileサービスを使用してscopeに対してコンパイルし、外側のdivの内容をシャッフルされたコンパイル済みのテンプルに設定します。
アウターダイブをクリックすると、コンテンツがシャッフルされていることがわかります。
ありがとうございます！ – olivier
ページが読み込まれたときに実行するように変更するにはどうすればよいですか？今度は要素をクリックします。ありがとうございました:) – olivier
@olivier私は知らない:)。リンク関数に直接 'click'ハンドラを置こうとしましたか？ – 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]);
}
}
}
これは、あなたが渡したID PARENTIDを持つ任意のdivの子供をシャッフルします
あなたはそのように使用できます。から適応
angular.element(document).ready(function() {
shuffleChildren(parentID);
});
がそれだろうあなたのページをどのように構築しているかを見ることができるようにショーコードを共有することは可能でしょうか？ –
あなたは完全な解決策を提供するのに十分な情報を与えていませんが、あなたが何を記述しているかによって、これらのdivは角度によって生成されないので、カスタムディレクティブを書かない限り、このシャッフル操作に角度は関与しませんこれらのアイテムのレンダリングを引き継ぐ。ただし、このタスクを実行するには、プレーンなjavascriptやその他のjavascriptライブラリを自由に使用することができ、角度には影響しません。 – Claies
ありがとう@Claies！ – olivier