我创建了 2 个列表框，其中一个左侧有 4 个项目(例如 )，右侧另一个是空的。我在它们之间有 2 个按钮，用于从左到右移动内容，反之亦然。
我已经在 Angular js 中实现了这个。
现在，问题是，每次我在框之间来回移动元素时，它们总是会附加到末尾，而我希望它们保持排序顺序(按字母顺序)，即使项目在框之间移动时也是如此。例如。我左边有蓝、绿、红、黄四种颜色。它们现在按字母顺序排列。我向左移动红色。然后，当我移回右侧时，它会添加到列表的末尾，即列表现在是蓝色、绿色、黄色、红色，而预期结果是蓝色、绿色、红色、黄色。我已经在使用“orderBy”，它会在数据第一次显示在用户界面上时对数据进行排序，但来回移动项目不会保留排序顺序。有没有办法在 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>
下面是我的 Controller 代码:
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 的基本行为是“我的 View 观察我的模型数据”，所以只需删除/添加元素到你的模型中，你的 View 就应该完成剩下的工作。至少你应该以这种方式设计你的指令/应用程序。
关于angularjs - 在选择框之间来回移动时对列表框项目进行排序(使用 ng-options)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20133958/