javascript - 如何使用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 色和当前 Angular 色，我必须将项目从可用 Angular 色移动到当前 Angular 色然后在当前 Angular 色选择框中上下移动项目--- 将项目从可用 Angular 色移动到当前 Angular 色我使用了 angular js--- 对于在当前 Angular 色中上下移动项目，我使用了 Jquery 但是当我发布项目的值顺序时，传递的格式与当前 Angular 色选择框中的格式不同。

请使用 fiddle 。

Answer 1

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

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

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

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

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