How to reflow Bootstrap span<x> with Angularjs?

Question

How to reflow Bootstrap span<x> with Angularjs?

I'm new to Angularjs and have no intuition for how to do what I want.

I have a section that displays a bunch of properties. If the model doesn't contain the property, that item is removed via AngularUi's ui-if like so.

<div class="row-fluid">
    <div class="span3" ui-if="!!model.Prop1">Prop1: {{ model.Prop1 }}</div>
    <div class="span3" ui-if="!!model.Prop2">Prop2: {{ model.Prop2 }}</div>
    <div class="span3" ui-if="!!model.Prop3">Prop3: {{ model.Prop3 }}</div>
    <div class="span3" ui-if="!!model.Prop4">Prop4: {{ model.Prop4 }}</div>
</div>

What I want to do is, for example, if two properties are empty, make the bootstrap spans span6 instead. Basically I want it to split the span12 evenly for the properties that actually have data and remove the others. ui-if takes care of removing empty properties from the dom nicely, but now how do I adjust the span<x>'s?

twitter-bootstrap
angularjs

Answer 1

You could use ng-class or you simply interpolate the class attribute:

<div class="span{{number}}" ui-if="!!model.Prop1">Prop1: {{ model.Prop1 }}</div>

And in controller you would do:

$scope.number = 6;

Of course, the logic to set $scope.number would be more complex than just setting it, and should reside in a Controller.