Question

这里有很多关于ng-repeat和自定义过滤器的问题，但它们都没有解决我面临的问题。

拿这个：

<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>

过滤器chunk是一个自定义过滤器，我用它来返回一个$scope.rows块，它是一个对象数组。

这可以正常工作，直到我更改$scope.columns的值。在这一点上，我希望ng-repeat指令将自己添加到摘要循环中以重新绘制，但事实并非如此。

当$scope.columns的值发生变化时，如何重新绘制？

来自评论的块过滤器是：

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正在通过指令

进行更新

/**
 * 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;
            }
        }
    }
}];

控制器在指令的范围内，所以我可以看到列输出正确的值。如果我看columns，我可以在更新时看到它发生变化。

Answer 1

我删除了过滤器中缓存的需要，并按照与此类似的问题的其他几个答案中的建议将逻辑移动到控制器中。

/**
 * 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;
};

这使得过滤器直接在视图中工作，因为它在每次迭代时调用过滤器修改导致摘要循环中出现havok的整个数据集。

我将其删除并直接放在控制器中。

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

角度自定义过滤器不更新ng-repeat

1 个答案: