Exploring AngularJS: Effiecient Looping and Styling

Being a beginner in AngularJS, please excuse me if this question seems silly.

I want to display my data in a grid format (using Ionic) where each row has separate columns like this:

<div class="row">
    <div class="col-33">Item 1</div>
    <div class="col-33">Item 2</div>
    <div class="col-33">Item 3</div>
</div>
<div class="row">
    <div class="col-33">Item 4</div>
    <div class="col-33">Item 5</div>
    <div class="col-33">Item 6</div>
</div>

My data is stored in a list structure similar to this:

    $scope.images = [];
    $scope.images.push({text: 1});
    $scope.images.push({text: 2});
    $scope.images.push({text: 3});
    $scope.images.push({text: 4});
    $scope.images.push({text: 5});
    $scope.images.push({text: 6});

How can I utilize the $scope.images list to represent my data as a grid?

The closest attempt I've made is shown below, but it's not functioning properly.

<ion-content>
    <div class="list list-inset" ng-init="myIndex = 0">

        {{myIndex }} : {{ images.length }}

        <div ng-repeat="myIndex < images.length" >

            <div class="row" ng-repeat="colIndex in [0, 1, 2]" ng-init="colIndex = 0">

                <div ng-show="myIndex + colIndex < images.length" class="col-33" ng-init="myIndex = myIndex + 1">

                    {{ myIndex }}:{{ colIndex }}:{{myIndex + colIndex}}:{{ images[myIndex + colIndex].text}}

                </div>

            </div>

        </div>

    </div>

</ion-content>

Is there a while loop available? I was hoping to increment the $index variable using ng-repeat="item in images", but I'm unsure how to accomplish that as well.

Thank you in advance

javascriptangularjsmodel-view-controller

Answer №1

Is this what you were looking for? Check out the fiddle here

<span style="float: left">{{item}}</span><br ng-if="($index+1)%3 == 0"/>

The line breaks after every three items to provide a neat layout, but there is potential to enhance this concept further.

Here's an updated version with a complete solution that works seamlessly: Take a look at the improved fiddle

<div class="container">
    <div ng-repeat="item in items" ng-if="$index%3==0" class="row">
        <span ng-if="$index<items.length" style="float: left">{{items[$index]}}</span>
        <span ng-if="($index+1)<items.length" style="float: left">{{items[$index+1]}}</span>
        <span ng-if="($index+2)<items.length" style="float: left">{{items[$index+2]}}</span>
    </div>
</div>

This code snippet explains itself well: it forms a row for every three elements while only displaying the elements that actually exist within the array.

Answer №2

<div class="row" ng-repeat="photo in photos" ng-if="$index % 3 == 0" ng-init="photoIndex = $index">
    <div ng-repeat="i in [0,1,2]" ng-if="(photoIndex + i)<photos.length" class="col-33">
        <img ng-src="{{photos[photoIndex+i]}}">
    </div>
</div>

Here is an abridged version of the preceding response.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing window.matchMedia in Javascript to retain user selections during page transitions

I am encountering difficulties with the prefers-color-scheme feature and the logic I am attempting to implement. Specifically, I have a toggle on my website that allows users to override their preferred color scheme (black or light mode). However, I am fac ...

javascriptjquerycssbackgroundlocal-storage

How to set the chosen option in a dropdown using AngularJS

I'm populating a dropdown menu with an array of different 'types'. When a user chooses an option from the dropdown, I store that selection in a cookie. Here is the code snippet where I update the ng-model: $scope.typeItem = $cookieStore.ge ...

angularjs

The AngularJS component materializes almost instantaneously

Using AngularJS, I have developed an application where a certain section of code is displayed after the page loads for a split second: <div class="col-sm-4" data-ng-repeat="user in users"> <div class="card"> ...

javascripthtmlangularjs

How can you dynamically load a Data-URI scheme image in Angular?

Upon a certain event called foo, my server sends back an image that is base64-encoded which I need to display on the client. Currently, I have it set up in the following way: index.html ... <img src="{{data}}"></img> ... controller.js ... $ ...

angularjsdata-uri

Updating a .txt file using JavaScript

Is there a method on the client side to add text to a file called text.txt using JavaScript? In Python: f = open("text.txt","w") f.write("Hello World") f.close() The code snippet above would input "Hello World" into the text file. I am looking for a sim ...

javascriptfile

Exploring the fundamentals of array iteration in AngularJS

Could you please clarify why this code is not looping? When I pre napIncident, it returns null. This is my code <tr ng-repeat="napIncident in vm.NapIncidents"> <pre>{{vm.NapIncidents | json}}</pre> ...

angularjs

Unable to retrieve any data while consuming a RESTful web service with AngularJS

As a novice in Angularjs, I am seeking assistance with examples for the following: The added script is as follows: var app = angular.module('myapp', []); app.controller('MyCtrl1', ['$scope', 'UserFactory', functio ...

angularjscrudrestful-urlangularjs-serviceangularjs-controller

having difficulty iterating through the data using map function

When attempting to use the map function in React Material UI to display an array of data in a select box, I encountered the error TypeError: Cannot read properties of undefined (reading 'map') while using the following code. Can anyone help me id ...

javascriptreactjsmaterial-ui

Using Jquery to dynamically add or remove a class based on scrolling behavior

Can someone help me with identifying the position of an element so that when the user scrolls to it and it appears on the screen, an icon can be highlighted? Currently, the script I am using adds the class too early, closer to the bottom of the block. I w ...

javascripthtmljquery

Having issues with importing images in Next.js using the Next Images package

Having trouble with importing images locally from the images folder. Error message: "Module not found: Can't resolve '../images/banner1.jpg'" https://i.stack.imgur.com/Dv90J.png Attempting to access images in ImagesSlider.js file at compo ...

javascriptreactjsimagenext.js

Get connected to your favorite music on iTunes without the hassle of opening a new window by simply clicking on the

Is there a way to call a link to iTunes (itms://...) without opening a new window? I've tried using window.open but that just opens a new window. Also, $.get('itms://...'); doesn't seem to work for me. Are there any other options avail ...

javascriptjquerypopupitunes

Obtain a numerical output from a selection of numbers

I am facing a simple problem that I can't solve due to my lack of knowledge and have not been able to find any solution online. What I want to achieve is: Create a "value 1" from an array of integers. Generate a random "value 2". Check if the rando ...

javascriptphpencryptionhash

Capturing jQuery ajax requests in Angular

Within my Angular application, I am utilizing the integrated $.couch API from CouchDB. My goal is to intercept every ajax request, regardless of whether it originates from Angular's $http service or jQuery's $.ajax (which is utilized by $.couch). ...

javascriptjqueryangularjsajax

Is it possible to avoid sending multiple $http requests in Angular? Are there more efficient methods available?

I have developed a rather intricate method for retrieving resources using $http. This method returns a promise and first checks my local cache to see if the resources are already available. If they are, it will return the cached data; if not, it will make ...

javascriptangularjs

Tips for displaying a category name only once if it has already been rendered in a map function

My scenario involves a variety of categories in which pharmaceutical drugs are classified. Each individual drug belongs to a specific class. Currently, my code iterates through all the categories from the category array and places drugs underneath them if ...

javascriptreactjs

Tips for implementing server-side pagination with Angular-UI Bootstrap by utilizing the skip parameter

i have a number of items generated using ng-repeat, i have to implement pagination.but everywhere i can see by getting the count value of items, i can add. but i am struggling with implementing skip functionality. For example, if the skip value is set to 1 ...

javascriptangularjspaginationangular-ui-bootstrap

The property 'licenses' has incompatible types. The type 'License[]' cannot be assigned to type 'undefined' in the getServerSideProps function while using iron-session

I am encountering an issue with red squiggly lines appearing on the async keyword in my code: Argument of type '({ req, res }: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>) => Promise<{ props: { admin: Admin; licenses?: undefined ...

javascriptreactjstypescriptnext.js

Converting Callbacks to Promises in Node.js

I am facing a challenge with my node js application as I am attempting to promisify multiple callback functions without success. It has reached a point where I am unsure if it is even feasible. If you can assist me in promisifying the code provided below, ...

javascriptnode.jscallbackpromise

Is there a way to determine whether a mouse-down event took place on the scroll-bar or elsewhere within the element?

Looking for a solution with my HTML div acting as a canvas containing various objects. The issue lies in the fact that when attempting to draw a selection rectangle by dragging with the mouse, if scroll bars appear due to the large size of the canvas, scr ...

javascripthtml

Remove elements from an array based on the indices provided in a separate array

1) Define the array a = [a,b,c,d,e,f,g,h,i,j]; using JavaScript. 2) Input an array 'b' containing 5 numbers using html tags. This will be referred to as the 'b' array. 3) Insert elements into array 'b' ensuring they are alwa ...

javascripthtmlarrayssplice