JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="ExampleCtrl">
    <div ng-repeat="item in items" 
         ng-class="{active: activeItem == item, hidden: item.hidden}"
    >
        <span ng-click="$parent.activeItem = item">{{item.text}}</span>
        <button ng-click="moveUp(item)">▲</button>
        <button ng-click="moveDown(item)">▼</button>
    </div>
    <button ng-click="remove()">Удалить</button>
</div>

CSS

span {cursor: pointer}
.active { background: #e5e5e5; }
.hidden { display: none; }

JavaScript

function ExampleCtrl($scope) {
    $scope.items = [
        {text: 'Первый', hidden: false},
        {text: 'Второй', hidden: false},
        {text: 'Третий', hidden: false},
        {text: 'Четвертый', hidden: false},
        {text: 'Пятый', hidden: true},
        {text: 'Шестой', hidden: false}
    ];
    $scope.activeItem = $scope.items[2];
    
    $scope.moveUp = function(item) {
        var pos = $scope.items.indexOf(item);
        
        for (var i = pos; i > 1; --i) {
            $scope.items.splice(i - 1, 0, $scope.items.splice(i, 1)[0]);
            if (!$scope.items[i].hidden) {
                break;
            }
        }
    };
    
    $scope.moveDown = function(item) {
        var pos = $scope.items.indexOf(item);
        
        for (var i = pos; i < $scope.items.length + 1; ++i) {
            $scope.items.splice(i + 1, 0, $scope.items.splice(i, 1)[0]);
            if (!$scope.items[i].hidden) {
                break;
            }
        }
    };
    
    $scope.remove = function() {
        var pos = $scope.items.indexOf($scope.activeItem);
        $scope.items.splice(pos + 1, $scope.items.length - pos);        
    };
}