Angular Digest Loop for Dynamic Photo Grid Styling

Question

Angular Digest Loop for Dynamic Photo Grid Styling

I have a special filter that alters the objects being filtered. However, when I apply ng-style="item.gridSize", it triggers my custom grid algorithm. This algorithm was adapted for my requirements from a source found at this link.

angular.module("custom.modules.photoGrid", []).filter('photoSearch', [function () {
    // Custom grid algorithm here
}]);

HTML:

<input type="text" ng-model="input.value"> <span>{{ results.length }}</span> Photos Found
<div ng-repeat='photo in photos | photoSearch:input.value as results track by photo.id' class="photo-item" ng-style="photo.gridSize">
    <img ng-src="/photos/{{photo.url}}">
</div>

A brief explanation: Whenever ng-model input.value changes, the filter is triggered to create a new grid layout for the filtered photos array. The dimensions are specified within gridSize, which may lead to digest loop issues.

Attempts made so far: I attempted moving the ng-repeat into a directive, but this hindered accessing result.length and input.value.

Another experiment involved using the bindonce directive with bo-style="photo.gridSize". However, this didn't update the grid post-user search due to its one-time binding nature.

Hence, my question remains: How can I adjust ng-repeat to assign a new gridSize property without causing a digest loop?

UPDATE: See the JSFiddle here.

Working Fiddle: Check out the functional version on JSFiddle here.

javascript css angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

There were a few issues that needed addressing. It wasn't specifically a problem with ng-style, but rather the fact that your photos were calculating different style objects in each digest cycle, triggering additional cycles.

Here are some of the problems I identified:

An error in logic resulted in 0 columns being generated, causing the size calculation to yield NaN for margin-top and failing. To resolve this, I set a default value of 1 column.
The usage of Math.random() > 0.8 produced varying results every time the filter function ran. As Math.random() generates different outcomes in each cycle, it led to consecutive digest loops triggered by updates to the gridSize object (due to individual $watch elements in the ng-repeat). This resulted in the error log displayed in the console.

I have prepared a working fiddle that addresses these issues. The primary modifications made include:

Assigning a consistent random value to each photo item after initializing the array

$scope.photos.forEach(function(onePhoto){
    onePhoto.randomValue = Math.random();
  });

Utilizing this value within the filter condition

if (data[i].randomValue > 0.8) {
}

Ensuring a minimum of 1 column is established during column creation

var n_columns = Math.max(1, Math.floor(size / (2 * (COLUMN_WIDTH + MARGIN))));

In addition (though likely only relevant to your fiddle), there was no photo_name field to filter by, so I utilized id instead.

You may consider addressing the NaN issue with an alternative default value, but at least now the console errors are understood.

If you wish to update random values each time the search is performed, you can implement a $watch on the input.value, encapsulate the code for generating random values into a function, and call it within the watch callback. In this way, the grid will utilize different random values on each search without impacting the digest cycle. A sample implementation can be found here.

var updateRandomValues = function() {
    $scope.photos.forEach(function(onePhoto){
        onePhoto.randomValue = Math.random();
      });
  };
  updateRandomValues();
  $scope.$watch('input.value', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        updateRandomValues();
    }
  });

Alternatively, if you aim to adjust the CSS styles only when obtaining different search results (as typing the same query will still update the layout), you should $watch the "results" variable instead. An example of this approach can be viewed here.

$scope.$watch('results', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        updateRandomValues();
    }
  });

Answer 2

There were a few issues that needed addressing. It wasn't specifically a problem with ng-style, but rather the fact that your photos were calculating different style objects in each digest cycle, triggering additional cycles.

Here are some of the problems I identified:

An error in logic resulted in 0 columns being generated, causing the size calculation to yield NaN for margin-top and failing. To resolve this, I set a default value of 1 column.
The usage of Math.random() > 0.8 produced varying results every time the filter function ran. As Math.random() generates different outcomes in each cycle, it led to consecutive digest loops triggered by updates to the gridSize object (due to individual $watch elements in the ng-repeat). This resulted in the error log displayed in the console.

I have prepared a working fiddle that addresses these issues. The primary modifications made include:

Assigning a consistent random value to each photo item after initializing the array

$scope.photos.forEach(function(onePhoto){
    onePhoto.randomValue = Math.random();
  });

Utilizing this value within the filter condition

if (data[i].randomValue > 0.8) {
}

Ensuring a minimum of 1 column is established during column creation

var n_columns = Math.max(1, Math.floor(size / (2 * (COLUMN_WIDTH + MARGIN))));

In addition (though likely only relevant to your fiddle), there was no photo_name field to filter by, so I utilized id instead.

You may consider addressing the NaN issue with an alternative default value, but at least now the console errors are understood.

If you wish to update random values each time the search is performed, you can implement a $watch on the input.value, encapsulate the code for generating random values into a function, and call it within the watch callback. In this way, the grid will utilize different random values on each search without impacting the digest cycle. A sample implementation can be found here.

var updateRandomValues = function() {
    $scope.photos.forEach(function(onePhoto){
        onePhoto.randomValue = Math.random();
      });
  };
  updateRandomValues();
  $scope.$watch('input.value', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        updateRandomValues();
    }
  });

Alternatively, if you aim to adjust the CSS styles only when obtaining different search results (as typing the same query will still update the layout), you should $watch the "results" variable instead. An example of this approach can be viewed here.

$scope.$watch('results', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        updateRandomValues();
    }
  });

Angular Digest Loop for Dynamic Photo Grid Styling

Answer №1

Similar questions

Angular 1: Handling Multiple Conditions and Exclusions Based on Other Conditions

Having trouble viewing the page of a new package you published on the NPM Website?

Issue with element alignment using CSS increments

Expandable Grid Sections in React MUI

What are the steps for generating a diagram using Chart.js?

Dark opaque background image with Material-UI styling

Create a JavaScript array containing all the elements from a MySQL table

Node.js seems to be having trouble with emitting events and catching them

How to retrieve cookie value from callback response in Angular?

Tabs within the AutoComplete popup in Material-UI

Incorporating a delete button onto an image using JavaScript

Troubleshooting Asynchronous Code in JavaScript

Is there a way to store JSON data in a constant variable using Node Fetch without encountering the error TypeError [ERR_INVALID_URL]: Invalid URL?

How to Apply CSS Styles to Input When it is in Focus Using Angular.js

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

Determine whether a component is linked to an event listener

Exploring Checkbox Limiting with jQuery

Unravel the JSON structure

Blur function not performing as anticipated

What causes the border to trigger the appearance of a scrollbar due to an overflow?