我还在学习angularjs，到目前为止它还很棒。我的页面工作除了这个奇怪的＆＃34; bug＆＃34;用于排序/排序数据网格。当我单击添加新按钮时，它会为我添加一个空行以输入数据。当我开始在文本框中输入时，它会触发orderBy并且网格按我输入的字母排序。排序应该只在单击列标题时排序，我无法找到输入的位置/方式排序发生。我很肯定这是问题，因为当我从ngrepeat中删除orderBy时，意外的效果停止，我可以正常输入我的数据。任何想法都会很棒，我在设置页面时使用它。 Code Guide
更新：我最终找到了解决方案，不得不改变我在谷歌搜索的内容，但这个帖子有多个解决方案。我刚刚使用了自定义指令方法，复制并粘贴：） Solution
**更新2：我发现的解决方案实际上只适用于某些情况。如果您在文本框的开头键入内容，则排序仍然会触发。但是，如果您在开头之外的任何位置进行编辑，它将按预期工作。有什么想法吗？
<div ng-app="CategoryFieldsApp">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panelHeader">Category Field Maintenance</h3>
</div>
<div class="panel-body" style="overflow:auto !important;min-height:400px;">
<br />
Search: <input ng-model="search" type="text" placeholder="Search" />
<br />
@using (Html.BeginForm("CategoryFields", "Maintenance", FormMethod.Post))
{
<div ng-controller="CategoryFieldsCtrl">
<span us-spinner="{radius:20, width:8, length: 16}" spinner-key="spinner-1" spinner-start-active="true"></span>
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="1%"></th>
<th width="200">
<a href="#" style="text-decoration:none;" ng-click="sortType = 'Category.Name'; sortReverse = !sortReverse">
Category
<span ng-show="sortType == 'Category.Name' && !sortReverse" class="fa fa-caret-down fa-lg"></span>
<span ng-show="sortType == 'Category.Name' && sortReverse" class="fa fa-caret-up fa-lg"></span>
</a>
</th>
<th width="200">
<a href="#" style="text-decoration:none;" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
Item Name
<span ng-show="sortType == 'Name' && !sortReverse" class="fa fa-caret-down fa-lg"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="fa fa-caret-up fa-lg"></span>
</a>
</th>
<th width="150">
<a href="#" style="text-decoration:none;" ng-click="sortType = 'CategoryFieldApprover.User.DisplayName'; sortReverse = !sortReverse">
Approver
<span ng-show="sortType == 'CategoryFieldApprover.User.DisplayName' && !sortReverse" class="fa fa-caret-down fa-lg"></span>
<span ng-show="sortType == 'CategoryFieldApprover.User.DisplayName' && sortReverse" class="fa fa-caret-up fa-lg"></span>
</a>
</th>
<th>
<a href="#" style="text-decoration:none;" ng-click="sortType = 'Active'; sortReverse = !sortReverse">
Active
<span ng-show="sortType == 'Active' && !sortReverse" class="fa fa-caret-down fa-lg"></span>
<span ng-show="sortType == 'Active' && sortReverse" class="fa fa-caret-up fa-lg"></span>
</a>
</th>
<th></th>
</tr>
</thead>
<tbody id="CategoryFieldGrid">
<tr dir-paginate="categoryField in categoryFields|orderBy:sortType:sortReverse|filter:search|itemsPerPage:10">
<td>
<input type="hidden" name="CategoryFields[{{$index}}].CategoryFieldID" value="{{categoryField.CategoryFieldID}}" />
<input type="hidden" name="CategoryFields[{{$index}}].CategoryFieldApprover.CategoryFieldApproverID" value="{{categoryField.CategoryFieldApprover.CategoryFieldApproverID}}" />
<input type="hidden" id="hdnIsDirty" name="CategoryFields[{{$index}}].IsDirty" value="{{categoryField.IsDirty}}" />
</td>
<td>
<input type="hidden" value="{{categoryField.Category.Name}}" />
<input class="hdnCategoryID" type="hidden" name="CategoryFields[{{$index}}].CategoryID" value="{{categoryField.CategoryID}}" />
<select class="ddlCategories" ng-model="categoryField.CategoryID" ng-options="category.CategoryID as category.Name for category in categories"></select>
</td>
<td>
<input type="text" name="CategoryFields[{{$index}}].Name" ng-model="categoryField.Name" />
</td>
<td>
<input type="hidden" value="{{categoryField.CategoryFieldApprover.User.DisplayName}}" />
<input class="hdnApproverOneUserID" type="hidden" name="CategoryFields[{{$index}}].CategoryFieldApprover.ApproverOneUserID" value="{{categoryField.CategoryFieldApprover.ApproverOneUserID}}" />
<select ng-model="categoryField.CategoryFieldApprover.ApproverOneUserID" ng-options="user.UserID as user.DisplayName for user in users"></select>
</td>
<td>
<input type="checkbox" class="active checkBox checkbox-inline" value="{{categoryField.Active}}" ng-model="categoryField.Active" name="CategoryFields[{{$index}}].Active" />
</td>
<td>
<input type="button" ng-click="remove($index)" ng-show="categoryField.ShowRemove" value="Remove" />
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
<br />
<a class="btn btn-default" ng-click="add()">Add Category Field</a>
<input class="btn-primary btn-sm" ng-click="save()" type="button" value="Save" />
</div>
}
</div>
</div>
var App = angular.module('CategoryFieldsApp', ['angularUtils.directives.dirPagination', 'angularSpinner']).controller('CategoryFieldsCtrl', function ($scope, $http, usSpinnerService) {
$http.get(_BaseUrl + "Maintenance/GetCategoryFields").success(function (response) {
$scope.categoryFields = response; //ajax request to fetch data into $scope.data
});
$http.get(_BaseUrl + "Maintenance/GetCategories").success(function (response) {
$scope.categories = response; //ajax request to fetch data into $scope.data
});
$http.get(_BaseUrl + "Maintenance/GetUsers").success(function (response) {
$scope.users = response; //ajax request to fetch data into $scope.data
$scope.stopSpin();
});
$scope.sortType = 'Name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.remove = function (index) {
$scope.categoryFields.splice(index, 1);
};
$scope.add = function () {
$scope.categoryFields.splice(0, 0, {
CategoryFieldID: 0,
CategoryID: 0,
Name: '',
Active: true,
ShowRemove: true
});
};
$scope.save = function () {
$('tbody tr').find('.ng-dirty').each(function (i, dirtyElement) {
$(dirtyElement).closest('tr').find('#hdnIsDirty').val(true);
});
$('form').submit();
};
$scope.startSpin = function () {
usSpinnerService.spin('spinner-1');
}
$scope.stopSpin = function () {
usSpinnerService.stop('spinner-1');
}
}）;
答案 0 :(得分：0)
$scope.sortType = 'Name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.categoryFields = $filter('orderBy')($scope.categoryFields, $scope.sortType); //Default order by
$scope.sortBy = function (sortType) {
$scope.sortReverse = (sortType !== null && $scope.sortType === sortType) ? !$scope.sortReverse : true;
$scope.sortType = sortType;
$scope.categoryFields = $filter('orderBy')($scope.categoryFields, $scope.sortType, $scope.sortReverse);
}