CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangularjs-filter
David Barker
David Barker

Reputation: 14620

Angular custom filter not updating ng-repeat

There are alot of questions on here about ng-repeat and custom filters but none of them address the problem I am facing.

Take this:

<div class="row" ng-repeat="row in rows | chunk:columns">

    <!-- Now loop over the row chunk to output the column -->
    <div 
        ng-class="{'col-xs-12':row.length<=1,'col-xs-6':row.length>1"
        ng-repeat="item in row"
    >
        {{ item.name }}
    </div>
</div>

The filter chunk is a custom filter that I made to return a chunk of $scope.rows that is an array of objects.

This works fine until I change the value of $scope.columns. At this point I would expect the ng-repeat directive to add itself to the digest loop to re-draw but it doesn't.

How would I get this to re-draw when the value of $scope.columns changes?

From comments the chunk filter is:

var _ = require('lodash');

/**
 * Chunk an array into pieces
 * @param collection
 * @param chunkSize
 * @returns {array}
 */
var chunk = function (collection, chunkSize) 
{
    if (!collection || _.isNaN(parseInt(chunkSize, 10))) 
    { 
        return [];
    }

    return _.toArray(
        _.groupBy(collection, function (iterator, index) 
        {
            return Math.floor(index / parseInt(chunkSize, 10));
        })
    );
}

/**
 * Angular filter to cache array chunks and return
 * x number of chunks from an array via a filter.
 *
 * @example
 * <div ng-repeat="item in items | chunk:2"> ... </div>
 * @returns {array}
 */
module.exports = function()
{
    return _.memoize(chunk);

    // If I console.log(_.memoize(chunk)()) here I get the output
    // from the first digest only.
};

$scope.columns is being updated by a directive

/**
 * toggleGridView directive
 * @returns {object}
 */
module.exports = ['localStorageService', function(localStorageService)
{
    return {
        replace : true,
        template: '<button type="button" ng-click="toggleView()"></button>',
        link : function(scope, el, attr) {
            scope.gridView = localStorageService.get('itemlistgrid') == "true";

            scope.columns = scope.gridView ? 2 : 1;

            scope.toggleView = function() 
            {
                localStorageService.set(
                    'itemlistgrid', 
                    scope.gridView = ! scope.gridView
                );

                scope.columns = scope.gridView ? 2 : 1;
            }
        }
    }
}];

The controller is in scope of the directive so I can see that columns is outputting the correct value. If I watch columns I can see it changes on update.

Upvotes: 3

Views: 1416

Answers (1)

David Barker
David Barker

Reputation: 14620

I removed the need for caching in the filter and moved the logic into the controller as recommended in a few other answers on questions similar to this.

/**
 * Angular filter to cache array chunks and return
 * x number of chunks from an array via a filter.
 *
 * @example
 * <div ng-repeat="item in items | chunk:2"> ... </div>
 * @returns {array}
 */
module.exports = function()
{
    // Removed the _.memoize caching
    return chunk;
};

This stopped the filter working directly in the view as it was calling the filter on every iteration modifying the entire dataset that causes havok in the digest loop.

I removed it and placed it directly in the controller.

// Created items as a private variable in the controller
var items = [];

// Watch for changes to gridView and call toggleGrid
$scope.$watch('gridView', toggleGrid);

function toggleGrid(flag)
{
    $scope.rows = $filter('chunk')(items, flag ? 2 : 1);
}

// With a restful resource success callback set the initial state
ItemsResource.index({}, function(data)
{
    // Set the private data to the collection of models 
    items = data.body.models;

    // Toggle the grid using the initial state of $scope.gridView
    toggleGrid($scope.gridView);
}

Upvotes: 1

Related Questions