如何使用 Angular 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

在我看来，你应该只修改 $scope 中的数组来获得正确的排序。

https://gist.github.com/jfornoff/db2bb5f0c35bc0364529 这是我在一个项目中用来修改数组顺序的一些代码的要点。

基本上你要做的就是获取指向当前选定元素的变量， 并修改相应的数组以适合您要执行的操作。

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

希望对您有所帮助，干杯！

Answer 2

您也可以使用 Angular 本身来上下移动元素。如果您对数组available 和current 中的元素重新排序，用户界面将自动重新排序元素。 使用数组splice 方法在数组中移动元素。有关如何移动数组中的元素，请参阅此答案。

Move an array element from one array position to another