JSFiddle - React, Tailwind, and code Playground

by loupax

HTML

<div ng-app="myapp">
    <div ng-controller="MyController">
        <ol>
            <li ng-repeat="item in list">{{item.text}}</li>
            <li id="ign" ng-ignore>Ignored item</li>
        </ol>
        
        <button id="change_ignored">Change position of ignored item</button>
        <button ng-click="shuffle_array()">Randomize order of elements</button>
          
        
    </div>
</div>

JavaScript

function shuffle(o){ //v1.0
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

var App = angular.module('myapp', []);
App.controller('MyController', ['$scope',function($scope){
    $scope.list = [];
    $scope.list.push({'text':'Text'});
    $scope.list.push({'text':'Text 2'});
    $scope.list.push({'text':'Text 3'});
    
    $scope.shuffle_array = function(){
        shuffle($scope.list);
    };
}]);

App.directive('ngIgnore', ['$timeout',function($timeout){
    return {
        link: function(scope, element){
            scope.$watch(function(){
                // Keep track of the original position of the element...
                var el = element[0];
                var siblings = Array.prototype.slice.call(el.parentNode.children);
                var parent   = el.parentNode;
                var index    = siblings.indexOf(el);
          
                $timeout(function(){
                    // After the digest is complete, place it to it's previous position if it exists
                    // Otherwise angular places it to it's original position
                    var item;
                    if(index in parent.children)
                        item = parent.children[index];
                    
                    if(!!item){
                        parent.insertBefore(el, item);
                    }
                    console.log('I run to Infinity and beyond!!! But I shouldn\'t...');
                });    
            });
            
        }
    }    
}]);

var btn_change = document.querySelector('#change_ignored');

btn_change.addEventListener('click', function(){
    var el = document.querySelector('#ign');
    var siblings = Array.prototype.slice.call(el.parentNode.children);
    var parent   = el.parentNode;
    var index    = siblings.indexOf(el);
    
    if((index - 1) in siblings)
    {
        var item = siblings[index - 1];    
        parent.insertBefore(el,...