Skip to content

Instantly share code, notes, and snippets.

@abelrgr

abelrgr/sortable-list.html

Created January 4, 2016 03:14
Show Gist options
  • Save abelrgr/5a144e14ef2b3c0ebfab to your computer and use it in GitHub Desktop.
Save abelrgr/5a144e14ef2b3c0ebfab to your computer and use it in GitHub Desktop.
Download ZIP
Angular Sortable directive List with delete
Raw
sortable-list.html
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<style type="text/css">
.bolsoft-sortable{
list-style-type:none;
margin: 0;
padding: 0;
}
.bolsoft-sortable li{
width: 100px;
padding: 2px 4px;
border: 1px solid black;
background: #F0EDED;
}
.bolsoft-sortable li .arrows{
float: right;
margin-right: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div ng-app="test">
<div ng-controller="controller1">
<bolsoft-sortable items="list" label="label" del="true">
</bolsoft-sortable>
</div>
<script type="text/javascript">
var app = angular.module('test', []).controller('controller1', ['$scope', function($scope){
$scope.list = ["one", "two", "three", "four", "five", "six"];
}]).directive('bolsoftSortable', [ '$templateCache', function ($templateCache) {
return {
restrict: 'E',
scope:{
items: '=',
},
template:
'<ul class="bolsoft-sortable">'+
'<li ng-repeat="item in items">'+
'{{ item }}'+
'<span class="arrows" ng-click="del($index)" ng-if="delButton">X</span>'+
'<span class="arrows" ng-click="move($index,true)" ng-if="$index">&uarr;</span>'+
'<span class="arrows" ng-click="move($index)" ng-hide="$index == items.length-1 ">&darr;</span>'+
'</li>'+
'</ul>',
link: function (scope, elem, attrs) {
scope.move = function (i,u) {
var temp= scope.items[i + ((u)? -1 : 1 )];
scope.items[i + ((u)? -1 : 1 )] = scope.items[i];
scope.items[i] = temp;
};
scope.delButton = (attrs.del) ? true : false;
scope.del = function (i) {
scope.items.splice(i,1);
};
}
};
}])
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment