Utilizing ng-class within a nested ng-repeat loop

Question

Utilizing ng-class within a nested ng-repeat loop

I'm currently working on a nested ng-repeat list feature, and my goal is to apply a specific class to the parent element when any item within the nested list undergoes modification.

Here's how the structure looks:

<div ng-repeat="pa in products" ng-class="{full: vari.basket>0}">
    <div ng-repeat="vari in pa.variacions">
       <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

In essence, I am aiming to assign the full class whenever the basket value of any 'vari' item exceeds 0.

Unfortunately, the implementation is not yielding the desired results. Can you point out what may be missing from my approach?

javascript angularjs

Answer 1

Answer №1

To dynamically assign a class to the parent element based on certain conditions, you can create a function in your controller.

<div ng-repeat="pa in products" ng-class="{full: isFull(pa.variacions)}">
    <div ng-repeat="vari in pa.variacions">
       <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

Define the following function in your controller:

$scope.isFull = function(variacions) {
  if (!Array.isArray(variacions)) {
    return false;
  }

  return variacions.find(vari => vari.basket > 0);
}

Answer 2

To dynamically assign a class to the parent element based on certain conditions, you can create a function in your controller.

<div ng-repeat="pa in products" ng-class="{full: isFull(pa.variacions)}">
    <div ng-repeat="vari in pa.variacions">
       <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

Define the following function in your controller:

$scope.isFull = function(variacions) {
  if (!Array.isArray(variacions)) {
    return false;
  }

  return variacions.find(vari => vari.basket > 0);
}

Answer 3

Answer №2

<div ng-repeat="pa in products" ng-class="{true: 'myFullClass'}[$ctrl.isProductBasketFull(pa)]">
    <div ng-repeat="vari in pa.variacions">
        <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

While this approach may not be the most efficient due to multiple loops being generated, one workaround could involve passing pa to a controller function that determines whether a vari basket is full, returning a boolean value based on the comparison.

In the controller:

$scope.isProductBasketFull = function(pa){
    for(var i=0,cnt=pa.length;i<cnt;i++)
        if(pa[i].basket === maxVal) // replace maxVal with your desired maximum value
            return true;
    return false;
};

Answer 4

<div ng-repeat="pa in products" ng-class="{true: 'myFullClass'}[$ctrl.isProductBasketFull(pa)]">
    <div ng-repeat="vari in pa.variacions">
        <input type="number" ng-model="vari.basket" name="basket" min="0" max="20" step="1" ng-init="vari.basket=0">
    </div>
</div>

While this approach may not be the most efficient due to multiple loops being generated, one workaround could involve passing pa to a controller function that determines whether a vari basket is full, returning a boolean value based on the comparison.

In the controller:

$scope.isProductBasketFull = function(pa){
    for(var i=0,cnt=pa.length;i<cnt;i++)
        if(pa[i].basket === maxVal) // replace maxVal with your desired maximum value
            return true;
    return false;
};

Utilizing ng-class within a nested ng-repeat loop

Answer №1

Answer №2

Similar questions

Switch the custom audio control button on and off within a v-for loop

Bring in a template in TypeScript with no need for require statement

Show a pair of pictures every X hours using Javascript

Fetching an image from an external API with NestJs: A beginner's guide

Having trouble creating a PDF from HTML

Checking for valid usernames using Regex in JavaScript

Exploring XML with Jquery

Save the content of the textbox on the webpage automatically, no need for a webservice or settimeout

Update the Callbacks to trigger every time a user scrolls to a different section while using fullPage.js

Is there a way to activate jQuery by simply clicking on a link?

Attempting to modify the element's value with the help of selenium

The function location.path("#/") does not seem to be functioning properly

When buttons contain an image instead of text, event.target.value will be undefined

Transferring information among PHP web pages using a list generated on-the-fly

Maintaining the state of a React component across page refreshes, with a preference for storing the

Using Backbone.js to dynamically filter a collection when a user clicks a specific element

comprising an HTML element inside a div element without altering its appearance

"Waiting for results with Node.js and Mongo DB is like trying to catch a

The weight of the Blender model is excessive

Is there an issue with this straightforward Javascript function for switching the CSS class of an HTML body?