Why does typing into a textbox cause Angularjs OrderBy to fire?

Question

I am still learning angularjs and so far it's been great. I have my page working other than this odd "bug" for ordering/sorting the grid of data. When i click the add new button, it appends an empty row for me to enter data. When i begin typing into the textbox, it fires off the orderBy and the grid sorts by what letter i typed in. The sorting should only be when the column headers are clicked and i can't find where/how typing is causing this sorting to occur. I am positive this is the problem because when i remove the orderBy from the ngrepeat, the undesired effect stops and i can enter my data as normal. Any ideas at all will be great, i used this in setting up the page. Code Guide

UPDATE: I found a solution finally, had to change what i searched in google but this thread has multiple solutions. I just used the custom directive method, copy and paste :) Solution

**UPATE 2: The solution i found actually only works under certain cases. If you begin typing at the start of the textbox, the sort still fires out. However, if you make an edit anywhere other than the start, it works as expected. Any thoughts?

<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');
}

});

score 0 · Answer 1 · answered Sep 07 '16 at 13:53

After LOTS of research and trial and error. The real solution to this problem was to manually control the orderBy. The directive above only works if the user types beyond index 0 of the input. The below snippet actually corrects the issue and does not need a custom directive.

    $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);
}

Why does typing into a textbox cause Angularjs OrderBy to fire?

1 Answers1