CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap-3
MBehtemam
MBehtemam

Reputation: 7919

Generating Dynamic value for class in Angularjs

In my app i want to add dynamic number to each class of div for creating a dynamic twitter bootstrap grid class.for example col-md-2 or col-md-3. and then repeat from these div :

 <div class="row" ng-repeat="row in placeholders">
        <div class="col-md-12">
            <div ng-repeat="column in row.columns" class="col-md-{{12 / row.columns.length}} biki"></div>
        </div>
    </div>

and this is the model : 

  $scope.placeholders = [{
            name: "Row 1",
            showName: true,
            columns: [{
                name: "Col1 in Row 1",
            }, {
                name: "Col2 in Row 1"
            }]

    }, {
            name: "Row 2",
            showName: true,
            columns: [{
                name: "Col 1 in Row 2",
            }, {
                name: "Col 2 in Row 2"
            },
             {
                name: "Col 3 in Row 2"
            }]

    }]

So if the length of columns array in object is 6 it divided by 12 and create 6 div with col-md-2 class. The problem happen when length of array is 5 or 8. If 5 the number is divided by 12 is 2.4 and twitter bootstrap have not any value for 2.4 so I want to parseInt or solve the problem with other way but I don't know how to do it.

Upvotes: 1

Views: 637

Answers (1)

mohamedrias
mohamedrias

Reputation: 18576

DEMO

Create this filter:

myApp.filter('parseInt', function () {
    return function(a,b){
        return(parseInt(a))
    }
});

Now in your view:

class="col-md-{{12 / row.columns.length | parseInt}} biki"

This will do the trick :)

Upvotes: 1

Related Questions