Automatically adjust the width of elements based on the number of items in an ng-repeat

I am completely new to working with AngularJS 1.4.x.

<div class="colContainer" ng-repeat="item in betNumber" ng-style="{width:{{rowWidth(item.length)}} +'px'}">

Whenever I press the AddNumber ball and add more than 13, I would really like it if the width size of the div could resize accordingly. This is something that I hope can be achieved.

Is there a way to dynamically change the width size of the div? I want it to work flawlessly without any issues or errors. Can anyone guide me on how to achieve this?

This is a reference link to further visualize what I'm trying to accomplish: http://plnkr.co/edit/t8bBjE?p=preview

angularjsangularjs-ng-repeatng-style

Answer №1

Modify the value of ng-style to 

{width:rowWidth(item.length) +'px'}
. This adjustment should produce the desired outcome.

The ng-style directive evaluates the entire object, utilizing the $parse method to assess the expression. Therefore, double curly braces are unnecessary in this context.

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

Sending an object over to a different page

Need some assistance with displaying JSON data that is being repeated using ng-repeat. { "title": "image title", "description": "Lorem ipsum dolor sit amet, per ea ferri platonem voluptaria, ea eum ubique ornatus interpretaris. Dolore erroribus reprimique ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

In AngularJS, I was attempting to display array indexes in reverse order. Can anyone provide guidance on how to achieve this?

<tr ng-repeat="qualityalert in qualityalerts" current="$parent.start;$parent.start=$parent.start+(qualityalerts.length);"> <td class="v-middle">{{current + $index}}</td> </tr> Important: I was talking about this specific code snipp ...

javascriptarraysangularjssorting

What is the correct way to assign a $scope variable after a successful ajax call?

Currently, I am working with Symfony and AngularJs 1.6.8 along with Symfony 3.4. Below is the configuration setup that I have: base.html.twig <html lang="en" data-ng-app="CeocApp" ng-controller="CeocController"> //css for the app <link id="ng ...

javascriptangularjsajaxsymfonysymfony-3.4

Managing additional hash characters in a route: Tips for handling excess hash symbols in AngularJS 1.5 with the new/component router

We're currently working on developing an application using Angular 1.5 along with the new component router features. Our team has encountered a unique situation and we are curious if there are any potential solutions available. The Key Players Iden ...

angularjsthinktecture-ident-serverangular-new-routeridentityserver2ngcomponentrouter

What is the reason behind the lack of data sharing among controllers in my service?

I have created a factory to retrieve data from the Database and pass it to all controllers in my application, like so: (function () { angular.module('appContacts') .factory('dataService', ['$http', dataService]); ...

angularjsfactory

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

javascriptjqueryhtmlangularjs

Retrieve JSON data from a PHP script to be used in an Angular scope

I am attempting to retrieve JSON data from a PHP file to use in an Angular controller. I have used json_encode(pg_fetch_assoc($result)); within the PHP file and when I check with console.log($scope.contents); in the Angular controller, the JSON data is ret ...

javascriptphpjsonangularjs

Separating Angular controllers into individual files may lead to functionality issues

Why is the controller not working when separated into different files? Application structure: Check out the app structure here store.html: <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <script src="https://ajax ...

angularjs

Unable to retrieve the $onAuth property with angularfire

I am currently working on integrating firebase auth into my app. The login controller is functioning properly, but I am facing an issue where the user gets logged out immediately after logging in. .controller('LoginCtrl', function ($scope, $loca ...

angularjsfirebaseangularfirefirebase-authentication

Removing Embedded Json Element from a Collection in AngularJS HTML

In my JSON Collection, I want to display the Email ID that is marked as IsPreffered = TRUE using AngularJS HTML without using JavaScript. This is my JSON Collection: { "user" : [ { "Name" : "B. Balamanigandan", "Email": [ ...

javascripthtmlangularjsjsonangular-filters

Incorporating an SVG with CSS styling from a stylesheet

After exploring various articles and questions on the topic, I am yet to find a definitive solution. I have an external file named icon.svg, and my objective is to utilize it across multiple HTML files with different fill colors and sizes for each instanc ...

javascripthtmlcssangularjssvg

Nested Promises in Angular's $q Library

I'm facing an issue with a function that should return a list of favorite locations. Here's the code snippet in question: When I call LocationsFactory.getFavoriteLocations(), it returns a promise like this: getFavoriteLocations: function() { ...

javascriptangularjs

Fire the $scope.submit() function of blueimp in Angular using programmatic methods

Using the submit() event of blueimp file uploader within the DOM works perfectly fine, like this: <span class="btn" ng-click="submit()">Go</span> But when trying to call $scope.submit(), it doesn't seem to function correctly: <span c ...

angularjsangularjs-scopeblueimpangularjs-controller

Sharing Data Between Controllers in AngularJS

I am faced with a challenge involving two Angular controllers: function Ctrl1($scope) { $scope.prop1 = "First"; } function Ctrl2($scope) { $scope.prop2 = "Second"; $scope.both = Ctrl1.prop1 + $scope.prop2; //Ideally, I would like to achieve t ...

javascriptangularjsangularjs-controller

Issue: rootScope:infdig has detected that the maximum number of $digest() iterations (10) has been reached

I've developed a custom directive that utilizes certain scope parameters. To monitor changes in these incoming parameters, I have implemented a watchGroup within the directive: scope.$watchGroup(['repairer', 'initial&apos ...

angularjsangularjs-directive

PlatypusTS: Embracing Inner Modules

Incorporating angular, I have the capability to fetch object instances or import modules using the $injector in this manner: export class BaseService { protected $http: angular.IHttpService; protected _injector: angular.auto.IInjec ...

angularjstypescript

Animating on page load with delay using Angular JS

Recently, I've been working on animating the logo for my app's home screen. My goal is to have the logo fade in after a 2-second delay and then start a looped animation where it bobs up and down. Initially, I considered adding a timeout function ...

angularjscss-animations

AngularJS select ng-model not correctly updating values

My form features a simple select element containing all the states along with their abbreviations. When I use the keyboard to navigate, I encounter an issue where the ng-model value does not change properly on the second keypress under certain circumstance ...

angularjs

Struggling to make AngularJS routes function properly

After starting from scratch, I rebuilt it with freshly downloaded angularJS (version 1.5.8). I simply placed both angular.js and angular-route.js in the library folder following this setup: https://gyazo.com/311679bf07249109671d621bc89d2d52 Here is how in ...

javascripthtmlangularjs

Tips on showing a response in an HTML node with Node.js and AngularJS

Just starting out with NodeJS and AngularJS. My goal is to fetch a response from an external site and display it in Angular JS. I managed to send the request and receive a response, but on the UI JSON appears as a string with forward slashes "\". For ...

angularjsnode.js