我创建了2个列表框，其中一个左侧有4个项目（例如），右侧则是空的。我在它们之间有2个按钮，可以从左向右移动内容，反之亦然。
我已经在angular js中实现了这一点。
现在的问题是，每次我在框之间来回移动元素时，它们总是附加在末尾，而我希望它们即使在框之间移动项目时也要保持排序顺序（字母顺序）。例如。我在左边有4种颜色，蓝色，绿色，红色，黄色。它们现在按字母顺序排列。我向左移动红色。然后，当我从右向右移动时，它会添加到列表的末尾，即列表现在是蓝色，绿色，黄色和红色，而预期结果是蓝色，绿色，红色，黄色。我已经在使用“ orderBy”，并且在第一次在UI上显示数据时就对数据进行排序，但是来回移动项不会保留排序顺序。
有没有办法在Angular中做到这一点？这是我的朋克
http://plnkr.co/edit/0KV9raBlgSuNT3mwKfWp?p=preview
我的指令中的代码如下：
app.directive('dualbox', function () {
return {
restrict: 'E',
replace: true,
scope: {
title: '@',
leftboxtitle: '@',
rightboxtitle: '@',
colors: '=ngModel'
},
templateUrl: 'dualboxTemplate.html',
link: function (scope, element, attrs) {
$('#add').click(function () {
var selected = $('#select1 option:selected');
angular.forEach(selected, function (value, key) {
scope.colors.destinationColors.push(value.text);
});
return !selected.remove().appendTo('#select2');
});
$('#remove').click(function () {
var selected = $('#select2 option:selected');
!selected.remove().appendTo('#select1');
var currentSelect2List = $('#select2 option');
scope.colors.oldDestinationColors = scope.colors.destinationColors;
scope.colors.destinationColors = [];
angular.forEach(currentSelect2List, function (value, key) {
scope.colors.destinationColors.push(value.text);
});
return
});
$("#selectAll").click(function () {
$('select option').attr("selected", "selected");
});
}
}
});
html模板中的代码是：
<table cellpadding="0" cellspacing="0" border="0" height="144px;">
<tbody>
<tr>
<td>
<select name="disable" multiple="" id="select1" class="select1 tall" ng-model="selectedColor" ng-options="c.name for c in colors.sourceColors | orderBy:'name'"></select>
</td>
<td valign="top">
<a href="#" id="add">
<img src="move_right.png" class="remove" />
</a>
<br />
<a href="#" id="remove">
<img src="move_left.png" class="add" />
</a>
</td>
<td>
<select name="enable" id="select2" class="select2 tall" multiple="" size="2" ></select>
</td>
</tr>
<tr>
<td colspan="3">
<div class="mar20Top mar10Btm flRt"></div>
</td>
</tr>
</tbody>
</table>
下面是我的控制器代码：
var app = angular.module('app', []);
app.controller('main', ['$scope',function($scope){
$scope.colors = {sourceColors:[
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
], destinationColors:[
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
]};
$scope.dummy=[{name:'rupa', age :"2"},
{name:'sdfas', age :"2"},
{name:'ruasdfapa', age :"2"},
{name:'rusdfaspa', age :"2"}]
$scope.items = [
{"id":0,"name":"OG"},
{"id":1,"name":"OS"},
{"id":2,"name":"PG"},
{"id":3,"name":"PS"}
];
$scope.selectedItem=$scope.items[0];
}])
以下是我使用指令的html代码：
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="myController.js"></script>
<script src="customDirective.js"></script>
</head>
<body ng-controller="main">
<div>
Listbox Demo:
<dualbox title="ABC Listbox Directive" leftboxtitle="Disabled Profiles" rightboxtitle="Enabled Profiles" ng-model="colors"></dualbox>
lasdjflasdjfla
asdfjlasjl
<select novalidate="" class="select1 tall" ng-options="c.name for c in dummy"></select>
<select novalidate="" ng-model="selectedItem" ng-options="item.name for item in items"></select>
</div>
</body>
</html>
感谢您的见解..对我的添加和删除功能进行了更改，从而达到了目的。基本上，不只是更新双盒子，解决方案是更新基础数据。将修补程序发布到此处，以便有相同问题的任何人都可以使用它。
scope.add = function() {
var selectedObjects = new Array();
$('#select1 option:selected').each(function(){
var selectedObject = scope.data.sourceColors[$(this).val()];
selectedObjects.push(selectedObject);
scope.data.destinationColors.push(selectedObject);
});
for(var i in selectedObjects){
var idx = scope.data.sourceColors.indexOf(selectedObjects[i]);
scope.data.sourceColors.splice(idx,1);
}
}
//remove function
scope.remove = function() {
var selectedObjects = new Array();
$('#select2 option:selected').each(function(){
var selectedObject = scope.data.destinationColors[$(this).val()];
selectedObjects.push(selectedObject);
scope.data.sourceColors.push(selectedObject);
});
for(var i in selectedObjects){
var idx = scope.data.destinationColors.indexOf(selectedObjects[i]);
scope.data.destinationColors.splice(idx,1);
}
}
最佳答案
您可以像这样转换ng-options以应用排序/过滤：
ng-options="c as c.name for c in colors.sourceColors | orderBy:'name'"
当然在两个选择元素上都执行此操作，以便两个列表都以正确的顺序显示元素。
由于AngularJS的基本行为是“我的视图观察我的模型数据”，因此只需删除/添加模型中的元素，其余的工作就由视图完成。至少您应该以这种方式设计指令/应用程序。