如何使用角度js上下移动项目？

Question

http://jsfiddle.net/Nidhin/xd3Ab/

var myApp = angular.module('myApp',[]); 
myApp.controller('MyCtrl', function($scope) { 
$scope.roles = [ 
    {roleId: 1, roleName: "Administrator"}, 
    {roleId: 2, roleName: "Super User"} 
]; 

$scope.user = { 
    userId: 1, 
    username: "JimBob", 
    roles: [$scope.roles[0]] 
};});myApp.directive('multiSelect', function($q) {return { 
restrict: 'E', 
require: 'ngModel', 
scope: { 
    selectedLabel: "@", 
    availableLabel: "@", 
    displayAttr: "@", 
    available: "=", 
    model: "=ngModel" 
}, 
template: '<div class="multiSelect">' + 
      '<div class="leftms fL ">' + 
       '<label class="control-label fL" for="multiSelectSelected">{{ availableLabel }} ' + 
        '({{ available.length }})</label>'+'<div class="clear"></div>'+ 
       '<select id="multiSelectAvailable" ng-model="selected.available" multiple ' + 
        'class="pull-left mselect " ng-options="e as e[displayAttr] for e in available"></select>' + '<div class="clear"></div>'+ 
      '</div>' + 
      '<div class=" width10p fL" >' + 
       '<button class="btn mover left" ng-click="add()" title="Add selected" ' + 
        'ng-disabled="selected.available.length == 0">' + 
       '<i class="icon-arrow-right clrblk">&gt;</i>' + 
       '</button>' + 
       '<button class="btn mover right" ng-click="remove()" title="Remove selected" ' + 
        'ng-disabled="selected.current.length == 0">' + 
       '<i class="icon-arrow-left clrblk">&lt;</i>' + 
       '</button>' + 
      '</div>' + 
      '<div class="leftms fL">' + 
       '<label class="control-label fL" for="multiSelectSelected">{{ selectedLabel }} ' + 
        '({{ model.length }})</label>' +'<div class="clear"></div>'+ 
       '<select id="currentRoles" ng-model="selected.current" multiple ' + 
        'class="pull-left mselect fL" ng-options="e as e[displayAttr] for e in model">' + 
        '</select>' + '<div class="clear"></div>'+ 
      '</div>' + 
      '<div class=" width10p fL" >' + 
       '<button class="btn mover left" ng-click="up()" title="Add selected" ' + 
        'ng-disabled="selected.current.length == 0">' + 
       '<i class="fa fa-angle-up clrblk"></i>' + 
       '</button>' + 
       '<button class="btn mover right" ng-click="down()" title="Remove selected" ' + 
        'ng-disabled="selected.current.length == 0">' + 
       '<i class="fa fa-angle-down clrblk"></i>' + 
       '</button>' + 
      '</div>' + 
      '</div>', link: function(scope, elm, attrs) { 
     scope.selected = { 
     available: [], 
     current: [] 
     }; 

     /* Handles cases where scope data hasn't been initialized yet */ 
     var dataLoading = function(scopeAttr) { 
     var loading = $q.defer(); 
     if(scope[scopeAttr]) { 
      loading.resolve(scope[scopeAttr]); 
     } else { 
      scope.$watch(scopeAttr, function(newValue, oldValue) { 
      if(newValue !== undefined) 
       loading.resolve(newValue); 
      }); 
     } 
     return loading.promise; 
     }; 

     /* Filters out items in original that are also in toFilter. Compares by reference. */ 
     var filterOut = function(original, toFilter) { 
     var filtered = []; 
     angular.forEach(original, function(entity) { 
      var match = false; 
      for(var i = 0; i < toFilter.length; i++) { 
      if(toFilter[i][attrs.displayAttr] == entity[attrs.displayAttr]) { 
       match = true; 
       break; 
      } 
      } 
      if(!match) { 
      filtered.push(entity); 
      } 
     }); 
     return filtered; 
     }; 

     scope.refreshAvailable = function() { 
     scope.available = filterOut(scope.available, scope.model); 
     scope.selected.available = []; 
     scope.selected.current = []; 
     }; 

     scope.add = function() { 
     scope.model = scope.model.concat(scope.selected.available); 
     scope.refreshAvailable(); 
     }; 
     scope.remove = function() { 
     scope.available = scope.available.concat(scope.selected.current); 
     scope.model = filterOut(scope.model, scope.selected.current); 
     scope.refreshAvailable(); 
     }; 

     scope.update = function() { 
     scope.model = scope.model.concat(scope.selected.current); 
     //scope.model = filterOut(scope.model, scope.selected.current); 
     scope.refreshAvailable(); 
     }; 

     scope.up = function() { 
     var $op = $('#currentRoles option:selected'); 
     if($op.length){ 
      $op.first().prev().before($op); 
     } 
     $('#currentRoles').find('option').attr('selected','selected'); 
     //scope.update(); 
     scope.refreshAvailable(); 
     }; 

     scope.down = function() { 
     var $op = $('#currentRoles option:selected'); 
     if($op.length){ 
      $op.last().next().after($op); 
     } 
     //scope.add(); 
     scope.refreshAvailable(); 
     scope.apply(); 
     }; 

     $q.all([dataLoading("model"), dataLoading("available")]).then(function(results) { 
     scope.refreshAvailable(); 
    }); 
}};})// JavaScript Document 

此链接，你会发现两个选择框可用角色&目前的角色，我必须从可用角色将项目为当前角色然后上下移动在当前作用的项目上选择框 - - 将项目从可用角色移动到当前角色我已经使用angular js ---用于在当前角色中向上和向下移动项目我已经使用Jquery但是当我发布项目的值顺序不是以相同的格式传递在当前角色选择框中。

请使用小提琴。

Answer 1

您也可以使用Angular本身来上下移动元素。如果您重新排列阵列available和current中的元素，用户界面会自动对元素重新排序。 使用数组splice方法来移动数组中的元素。查看关于如何移动数组中的元素的答案。

Move an array element from one array position to another

Answer 2

在我看来，你应该修改$范围内的阵列，以获得正确的排序。

https://gist.github.com/jfornoff/db2bb5f0c35bc0364529 这是一个代码，我用来修改我工作的项目中的数组订单的要点的要点。

基本上你会做的只是抓住你指向当前选定元素的变量， 并修改相应的数组以适应你正在尝试做的事情。

$scope.up = function(){ 
    ArrayService.moveUp(correspondingArray, selected.current); 
}; 

希望有帮助，欢呼！