AngularJs moving up/down item
by wales
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<body ng-app="repeats" class="container">
<div ng-controller="mainController">
<table class="table table-condensed">
<tr ng-repeat="item in items">
<td>{{item.title}}</td>
<td><span ng-show="!$first" ng-click="moveUp($index)" class="glyphicon glyphicon-arrow-up">up</span>
</td>
<td><span ng-show="!$last" ng-click="moveDown($index)" class="glyphicon glyphicon-arrow-down">down</span>
</td>
</tr>
</table>
</div>
</body>
JavaScript
(function () {
var module = angular.module("repeats", ['ui.bootstrap']);
module.controller("mainController", function ($scope) {
$scope.items = [{
title: "Item 1"
}, {
title: "Item 2"
}, {
title: "Item 3"
}, {
title: "Item 4"
}, {
title: "Item 5"
}, ];
var move = function (origin, destination) {
var temp = $scope.items[destination];
$scope.items[destination] = $scope.items[origin];
$scope.items[origin] = temp;
};
$scope.moveUp = function (index) {
move(index, index - 1);
};
$scope.moveDown = function (index) {
move(index, index + 1);
};
});
}());