CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
neomartin
neomartin

Reputation: 11

ngRepeat items and repeat items by a Property?

I need repeat all items which I have, but I need RE-repeat items by a "quantity" property.

$scope.products = [{name: 'Mouse', price: 2, quantity: 3},
                   {name: 'item2', price: 5, quantity: 2}]

I need to obtain in final HTML 3(quantity) divs of Mouse item, 2 divs of item2 :

<div>
 Mouse<br/>
 Price: $2 <br/>
</div>
<div>
Mouse<br/>
Price: $2 <br/>
</div>
<div>
Mouse<br/>
Price: $2 <br/>
</div> //need Mouse be repeated 3 times by they quantity property

Upvotes: 0

Views: 64

Answers (2)

Shasha
Shasha

Reputation: 669

@neomartin u can show the price depending on number of quantity

// html 

<div ng-app>
 <div ng-controller="ClickToEditCtrl">
    <p>Your Data:</p>
    <ul ng-repeat="(key, value) in products">
        name: {{value.name}} :  Quantity {{value.quantity}} <br/>
              price: {{value.price * value.quantity | currency }}
    </ul>
</div>

// js

function ClickToEditCtrl($scope) {

    $scope.products = [{name: 'Mouse', price: 2, quantity: 3},
               {name: 'item2', price: 5, quantity: 2}]
 }

Here is the : Jsfiddle i hope this will help

Upvotes: 0

Tj Gienger
Tj Gienger

Reputation: 1405

Here's one way:

    <ul style="color: white">
        <li ng-repeat="product in products">
            <ul>
                <li ng-repeat="t in times(product.quantity) track by $index">{{product.name}}</li>
            </ul>
        </li>
    </ul>

in the controller:

    $scope.products = [{name: 'Mouse', price: 2, quantity: 3},
               {name: 'item2', price: 5, quantity: 2}];
    $scope.times = function(x) {
        return new Array(x);
    };

and a fiddle

Upvotes: 2

Related Questions