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

在此链接上，您会找到两个选择框可用角色＆amp;当前角色，我必须将项目从可用角色移动到当前角色然后在当前角色选择框中上下移动项目 ---将项目从可用角色移动到当前角色我使用了角度js ---对于在当前角色中向上和向下移动项目我使用了Jquery但是当我发布时，item的值顺序没有以当前角色选择框中的相同格式传递。

请使用小提琴。

Answer 1

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

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

基本上你要做的就是抓住指向当前所选元素的变量，并修改相应的数组以适合您的尝试。

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

希望有所帮助，欢呼！

Answer 2

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

Move an array element from one array position to another

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

2 个答案: