我目前正在使用jQuery sortable重新排列应用程序中的表行。我把这一切都搞好了，除了我需要引入功能，只有当用户从页面上的下拉框中选择一个团队时，才会启用拖动功能。这个想法是当用户第一次到达视图时，将显示一个团队行列表。用户可以从下拉列表中选择一个唯一的团队，并过滤与该特定团队关联的所有行。这是我希望能够启用可排序功能的时候。我在Angular指令中使用可排序库，我正在过滤Angular控制器中的所有表行。如果有人能指出我正确的方向，我将非常感激。这是我的代码：
myTeam.html
<div class="row">
<!-- Header Start -->
<banner-directive banner-title="Favorite Teams">
</banner-directive>
<!-- Header End -->
<div id="wrap">
<div class="container">
<div class="row">
<div class="team-order">
<div class="team-select-wrapper" style="display: inline-block">
<h2>Select team</h2>
<select class="form-control" name="teamList" ng-model="selectedteam" ng-options="team as team.name for team in teams" ng-change="onTeamSelected()">
<option value="" disabled selected>Select a Team</option>
</select>
</div>
<strong>{{teammatches.length}}</strong>Teams:
</div>
<team-order-matches matches="teammatches" teamorder="teamorder"></team-order-matches>
</div>
</div>
</div>
</div>
<div class="team-order-matches">
<div class="content">
<table class="table" id="draggable_rows">
<thead style="position: fixed; top:182px;">
<tr>
<th class="table-col-medium">
Name
</th>
<th class="table-col-medium">
Team
</th>
<th class="table-col-medium">
Amount
</th>
<th class="table-col-large">
Win
</th>
<th class="table-col-medium">
Loss
</th>
<th class="table-col-medium">
Draw
</th>
<th class="table-col-medium">
Manager
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="team in teams" class="team-order-row" id="{{team._id}}">
<td class="table-col-medium" style="position: relative;">
Name
</td>
<td class="table-col-medium">
Example
</td>
<td class="table-col-medium">
Example
</td>
<td class="table-col-large">
Example
</td>
<td class="table-col-medium">
Example
</td>
<td class="table-col-medium">
Example
</td>
<td class="table-col-medium">
Example
</td>
</tr>
</tbody>
</table>
</div>
</div>
这是我的控制器
function TeamOrderMatchesController($scope,$location, $filter, $window, LocaleService) {
$scope.teammatches = [];
$scope.sortColumn = sortColumn;
$scope.onTeamSelected = onTeamSelected;
//filters the list to team that is selected
function onTeamSelected(){
TeamService.getMatchEvalOrder($scope.selectedteam._id).then(function(result){
$scope.runorder = result.result;
$scope.teammatches = orderByEvalOrder($scope.runorder, filterMatchesByTeam())
});
}
//Gets the unique team list for the dropdown menu
function getTeamList(){
var teams = _.map($scope.matches, function(match){
var liveVersion = _.find(match.versions, function(version){
return match.liveVersion === version.version;
});
return liveVersion.team;
});
var uniqueTeams = _.uniq(teams, function(team){
return team._id;
});
return uniqueTeams;
}
//Captures the evaluation order of the rows dragged and dropped
function orderByEvalOrder(orderedMatchIds, matches) {
var orderedMatches = [];
if(orderedMatchIds && orderedMatchIds.length > 0){
_.each(orderedMatchIds, function(orderedmatch){
var foundMatch = _.find(matches, function(m) {
return m._id == orderedmatch;
});
if(foundMatch) {
orderedMatches.push(foundMatch);
}
});
_.each(matches, function(match){
if (orderedMatchIds.indexOf(match._id) < 0) {
orderedMatches.push(match);
}
});
}
else{
orderedMatches = matches;
}
return orderedMatches;
}
//Filters the matches on the team selected
function filterMatchesByTeam() {
return _.filter($scope.matches, function(match){
var liveVersion = _.find(match.versions, function (version) {
return match.liveVersion === version.version;
});
return liveVersion.team._id === $scope.selectedteam._id;
});
}
function sortColumn(predicate, reverse) {
$scope.sortedColumn = predicate;
$scope.matches = $filter('orderBy')($scope.matches, matchPredicate, reverse);
function matchPredicate(match) {
var column;
if (shouldSortOnRoot()) {
column = match[predicate];
} else {
setVersionColumn();
}
return column;
function shouldSortOnRoot() {
return match.hasOwnProperty(predicate);
}
function setVersionColumn() {
var tempColumn = getLiveVersion(match)[predicate];
if (tempColumn.name) {
column = tempColumn.name;
} else {
column = tempColumn;
}
}
}
}
}
enter code here
exampleApp.directive（＆＃39; teamOrderMatches＆＃39;，[＆＃39; _＆＃39;，teamOrderMatches]）;
function teamOrderMatches（_）{ 返回{ 限制：＆＃39; E＆＃39;， 范围： { onsave：＆＃39;＆amp;＆＃39;， oncancel：＆＃39;＆amp;＆＃39;， 匹配：＆＃39; =＆＃39;， isDraggable：＆＃39;＆amp;＆＃39;， runorder：＆＃39; =＆＃39; }， link：function（scope，elem）{ var table = elem.find（＆＃34; #draggable_rows tbody＆＃34;）; function updateScope（）{ var ids = _.map（table.children（），function（child）{ return child.id; }）;
var idsWithoutEmpty = _.filter(ids, function(id) {
return id && id !== "";
});
scope.runorder = idsWithoutEmpty;
console.log(scope.teamorder);
scope.$apply();
}
table.sortable({
axis: 'y',
items: 'tr',
connectWith: 'table',
placeholder: "highlight",
tolerance: 'pointer',
scroll: true,
sort: function(event, ui) {
var currentScrollTop = $(window).scrollTop(),
topHelper = ui.position.top,
delta = topHelper - currentScrollTop;
setTimeout(function() {
$(window).scrollTop(currentScrollTop + delta);
}, 5);
},
//Helper function to keep table from collapsing when being sorted
helper: function(e, tr){
var $originals = tr.children();
var $helper = tr.clone().addClass('clone');
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width());
});
return $helper;
},
//The update function will update the table rows scope after they have been dragged to a new position
update: function(){
updateScope();
}
}).disableSelection();
},
controller: 'TeamOrderMatchesController'
};
}