CODEWITHSUNDEEP
javascriptarraysangularjssortingangularjs-material
nick.cook
nick.cook

Reputation: 2141

AngularJS - ngRepeat sorting changes length of array

JSFiddle: http://jsfiddle.net/WdVDh/101/.

For some reason, when I change the sorting option for an ng-repeat list, the length of the array changes, and in my local copy, all items are removed.

I've used a combination of filters/sorting, including an option to filter in/out employees with a completed 'leaveDate' property via checkbox selection linked to a 'showLeavers' $filter directive.

In my local copy, when the checkbox isn't selected and either the second or third sorting option are selected, the array is cleared, so nothing appears in the ng-repeat list, but when the checkbox is selected, or the first or fourth sorting options are selected, the list appears as it should.

Obviously an issue somewhere in the code (I would guess the filter directive), because I can demonstrate something similar like in the JSFiddle above.

HTML:

<md-list-item ng-repeat="employee in employees | orderBy: sortEmployees | filter: searchEmployees | showLeavers:showLeaver">

<md-input-container class="col-xs-12 col-sm-6 col-md-3">

    <label>Sort by</label>

    <md-select ng-model="allEmployees.sortEmployees">

        <md-option selected value="surname">Surname - A to Z</md-option>

        <md-option value="-surname">Surname - Z to A</md-option>

        <md-option value="forename">Forename - A to Z</md-option>

        <md-option value="-forename">Forename - Z to A</md-option>

    </md-select>

</md-input-container>

<md-checkbox ng-model="showLeaver">Show Leavers?</md-checkbox>

Filter:

app.filter('showLeavers', function() {
return function (employees, showLeaver) {
    var matches = [];

    angular.forEach(employees, function(value) {
        matches.push(value);

        if (value.leaveDate && !showLeaver) {
            matches.splice(value);
        }
        return matches;
    }
})

Upvotes: 0

Views: 90

Answers (1)

KL_
KL_

Reputation: 1513

You need to change your .splice(), you need to provide the index of the element, and how much elements you want to splice:

matches.splice(matches.indexOf(value), 1);

Or, you can just use .filter() like this:

var matches = employees.filter(match => match.leaveDate.length <= 0 || showLeaver);

Upvotes: 1

Related Questions