Troubleshooting problems with ng-repeat integration in Bootstrap and AngularJS

Question

Troubleshooting problems with ng-repeat integration in Bootstrap and AngularJS

I am currently in the process of developing an application using Bootstrap and AngularJS. One issue I have encountered involves using ng-repeat within a col-md-3 to list products. The challenge lies in wanting to incorporate a collapse feature into the grid, but due to the automatic generation of columns, I am unsure of how to proceed.

To better illustrate my dilemma, consider the following diagram: Initially, the grid is populated with .col-md-3 elements through ng-repeat.

My goal is to introduce a .col-md-12 that will appear directly below the row corresponding to the clicked .col-md-3 element.

Initially, I thought about dynamically adding an empty .col-md-12 after every set of 4 .col-md-3 elements, but implementing this approach seems challenging. Does anyone have any alternative suggestions?

Here is the relevant html:

<div class="infinite" infinite-scroll="loadDetails()">
      <div class="col-xs-3 col-md-3" ng-repeat="release in main.releases | filter:main.album">
        <release release="release" artist="main.artist" class="dropdown"></release> 
      </div>
</div>

EDIT: For those interested, here is a live Plunker demo showcasing tasseKATT's proposed solution.

javascript angularjs twitter-bootstrap angularjs-ng-repeat

Answer 1

Answer №1

Implement a unique custom directive on each inner element along with a position counter that starts at 1 and a marker indicating if it's the last element:

<div ng-repeat="item in items" class="col-xs-3">
  <div class="item" my-directive position="{{ $index + 1 }}" last="{{ $last }}">
  </div>
</div>

Create the directive using an isolated scope, bind scope properties to the values of the position and last attributes, and add a click event handler to the element:

app.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: { position: '@', last: '@' },
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        ...
      });
    }
  };
});

In the click handler, first create the collapse element or select it if it already exists:

var collapseQuery = document.querySelector('#collapse');
var collapse = collapseQuery === null ?
angular.element('<div id="collapse" class="col-xs-12"><div class="twelve"></div></div>') :
angular.element(collapseQuery);

Based on the position of the clicked element, calculate the next multiple of four:

var calculatedPosition = Math.ceil(scope.position / 4) * 4;

Retrieve the element at the calculated position or the last one if the position is out of range:

var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

var calculatedElement = angular.element(calculatedQuery);

Insert the collapse element after the element at the calculated position:

calculatedElement.parent().after(collapse);

There may be room for optimization, but this should guide you in the right direction.

Check out a demo with additional visuals here: http://plnkr.co/edit/fsC51vS7Ily3X3CVmxSZ?p=preview

Answer 2

Implement a unique custom directive on each inner element along with a position counter that starts at 1 and a marker indicating if it's the last element:

<div ng-repeat="item in items" class="col-xs-3">
  <div class="item" my-directive position="{{ $index + 1 }}" last="{{ $last }}">
  </div>
</div>

Create the directive using an isolated scope, bind scope properties to the values of the position and last attributes, and add a click event handler to the element:

app.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: { position: '@', last: '@' },
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        ...
      });
    }
  };
});

In the click handler, first create the collapse element or select it if it already exists:

var collapseQuery = document.querySelector('#collapse');
var collapse = collapseQuery === null ?
angular.element('<div id="collapse" class="col-xs-12"><div class="twelve"></div></div>') :
angular.element(collapseQuery);

Based on the position of the clicked element, calculate the next multiple of four:

var calculatedPosition = Math.ceil(scope.position / 4) * 4;

Retrieve the element at the calculated position or the last one if the position is out of range:

var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

var calculatedElement = angular.element(calculatedQuery);

Insert the collapse element after the element at the calculated position:

calculatedElement.parent().after(collapse);

There may be room for optimization, but this should guide you in the right direction.

Check out a demo with additional visuals here: http://plnkr.co/edit/fsC51vS7Ily3X3CVmxSZ?p=preview

Answer 3

Answer №2

To approach this question from an angular perspective and follow the bootstrap convention of using 12 columns in a row, consider the following:

When creating grid columns, specify how many of the twelve available columns you want to span. For instance, three equal columns would be represented by three .col-xs-4.

In your situation, each row can contain up to 4 .col-xs-3 columns or just one .col-xs-12. Organize your data accordingly by breaking it down into smaller arrays.

$scope.getRows = function(array) {
var rows = [];

var i,j,temparray,chunk = 4;
for (i=0,j=array.length; i<j; i+=chunk) {
    temparray = array.slice(i,i+chunk);

    rows.push(temparray);
}

return rows;
};

$scope.rows = $scope.getRows($scope.main.releases);

You can then utilize nested ngRepeat with ng-if to achieve the desired layout. The ng-if directive ensures that a col-xs-12 is generated only when a corresponding .col-xs-3 is clicked.

<div ng-repeat="row in rows">
  <div class="row">
    <div class="col-xs-3" ng-repeat="release in row" ng-click="main.releaseClicked=release">
      <div class="release">{{release}}</div> 
    </div>
  </div>
  <div class="row" ng-repeat="release in row" ng-if="main.releaseClicked==release">
    <div class="col-xs-12">
      <div class="detail">Release detail: {{release}}</div>
    </div>
  </div>
</div>

This approach provides a more declarative view of how the app functions without relying on jQuery for DOM manipulation.

For a demonstration, check out this working demo: http://plnkr.co/ujlpq5iaX413fThbocSj

Answer 4

To approach this question from an angular perspective and follow the bootstrap convention of using 12 columns in a row, consider the following:

When creating grid columns, specify how many of the twelve available columns you want to span. For instance, three equal columns would be represented by three .col-xs-4.

In your situation, each row can contain up to 4 .col-xs-3 columns or just one .col-xs-12. Organize your data accordingly by breaking it down into smaller arrays.

$scope.getRows = function(array) {
var rows = [];

var i,j,temparray,chunk = 4;
for (i=0,j=array.length; i<j; i+=chunk) {
    temparray = array.slice(i,i+chunk);

    rows.push(temparray);
}

return rows;
};

$scope.rows = $scope.getRows($scope.main.releases);

You can then utilize nested ngRepeat with ng-if to achieve the desired layout. The ng-if directive ensures that a col-xs-12 is generated only when a corresponding .col-xs-3 is clicked.

<div ng-repeat="row in rows">
  <div class="row">
    <div class="col-xs-3" ng-repeat="release in row" ng-click="main.releaseClicked=release">
      <div class="release">{{release}}</div> 
    </div>
  </div>
  <div class="row" ng-repeat="release in row" ng-if="main.releaseClicked==release">
    <div class="col-xs-12">
      <div class="detail">Release detail: {{release}}</div>
    </div>
  </div>
</div>

This approach provides a more declarative view of how the app functions without relying on jQuery for DOM manipulation.

For a demonstration, check out this working demo: http://plnkr.co/ujlpq5iaX413fThbocSj

Troubleshooting problems with ng-repeat integration in Bootstrap and AngularJS

Answer №1

Answer №2

Similar questions

Transforming an array into an object for generating a JavaScript report

Navigate to a specified div using JavaScript

Why is the React onClick method returning undefined upon the first selection, and why are the values being passed not consistent with

The event listener for browser.menus.onClicked is dysfunctional in Firefox

The results obtained from using $http get are not the same as those obtained

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Switching the buttons' values to correspond with JavaScript functions

Angularjs's approach to managing HTTP connections through connection pooling

Invalid input: database object is missing

The `Route` component is expecting a `function` for the `component` prop, but instead it received an `object`

Issue with Angular binding not updating after being assigned in promise.then() function

Replicated shadows brought to life in three.js

Nginx is responsible for handling files for routes that are not found within the AngularJS application

The anchorEl state in Material UI Popper is having trouble updating

Nested views within Angular providing a multitude of perspectives

When utilizing the JavaScript createElement() method to create elements on keydown, it will not be compatible with jQuery's draggable() method

Can trusted events in Chrome trigger a timeout with Synchronous Ajax requests?

What is the best way to utilize {...this.props} within a functional component?

Protection of Angular expressions

The noclose feature in Twitter Bootstrap is malfunctioning when placed within a div