Hello folks,
In this blog I am going to give example to apply drag-drop sorting in visualforce page with use of angularJs.
Lets start with creatting basic Html template to host our app. We will use the ng-app and ng-controller directives to link up the body tag to our Angular application. At the bottom we will include our required libraries.
Prerequisite:<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.15.0/sortable.min.js"></script>
In this code we define an Angular module and name it ngApp, and include the ui.sortable in the requires parameter. This ui.sortable is what wires up angular-ui-sortable to our module. We also define the controller called myController for our module and inject the Angular $scope object. This is where we will set up our Angular sortable.
<script >
var ngApp = angular.module('myNgApp', ['ui.sortable']);
ngApp.controller('myController', function ($scope) {
$scope.names = [ "Test1", "Test2", "Test3" ];
});
</script>
Now lets use this $scope name variable to display data in Ul by adding ng-model Directive on it and ng-repeat to loop over array. To make this list sortable, all we need to do is use the ui-sortable directive.<ul ui-sortable="sortableOptions" ng-model="names">
<li ng-repeat="person in people" class="list-group-item">{{name}}</li>
</ul>
To see this in action let’s add a pre element and bind it to the people array that will show the order of array in real time.
<pre>{{names}}</pre>
Final code will look like below.
<apex:page standardStylesheets="false" sidebar="false" showHeader="false"> <apex:slds /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.15.0/sortable.min.js"></script> <script> var ngApp = angular.module('ngApp', ['ui.sortable']); ngApp.controller('myController', function ($scope) { $scope.names = [ "Test1", "Test2", "Test3" ]; }); </script> <body ng-app="ngApp" ng-controller="myController"> <article class="slds-card"> <div class="slds-card__header slds-grid"> <div class="slds-media__body"> <h2 class="slds-card__header-title"> <a href="javascript:void(0);"class="slds-card__header-link slds-truncate" title="Names"> <span>Name List</span> </a> </h2> </div> </div> <div class="slds-card__body slds-card__body_inner"> <ul ui-sortable="sortableOptions" ng-model="names"class="slds-has-dividers_top-space"> <li ng-repeat="name in names " class="slds-item">{{name}}</li> </ul> <pre>{{names}}</pre> </div> </article> </body> </apex:page>
Output:
Hope it will help. Let me know your comments.
