How to conditionally insert HTML after AngularJs Directive paired with ngRepeat? - angularjs

Question

=================
First of I just want to say that I'm new to this AngularJs business (started earlier today) and I probably over complicate things.
With that being said let's get down to business, shall we?
I have the following jsFiddle and the html output is as follows.
<div ng-app="test" ng-controller="About" class="hex-grid clearfix ng-scope">
<div class="hex odd" ng-repeat="person in ledning">
<a href="">
<div class="inner">
<h3 class="ng-binding">Just a name</h3>
<hr class="grid-1 center">
<p class="ng-binding">a title</p>
</div>
<div class="hex-1">
<span class="after"></span>
</div>
<div class="hex-2">
<span class="after"></span>
</div>
<span class="after"></span>
</a>
</div>
<!-- and 5 times more -->
</div>
Now, What I want to achieve is this -->http://jsfiddle.net/engstrumpan/yCv79/4/embedded/result/.
This is just plain html (no AngularJs) just to demonstrate what I want to achieve. This particular layout was achieved by inserting <br /> after hexagon 3 and 5
Imagine now if I want a layout like so
1 1 1 1
1 1 1 1 or even 1 1
1 1 1 1 1 1
1 1 1 1
1 1 1
1 1
1
How would one go about implementing this?
This directive is used multiple times so I want it to be as generic as possible.
What I've tried so far is is the following
var app = angular.module('test', []);
app.controller('About', function ($scope) {
$scope.ledning = [
{
...
shouldBreak: true
}
});
app.directive('hexagon', function () {
var tmpl = '<div>
<!-- directive template snippet -->
</div>
<br ng-show="{{data.shouldBreak}}" />';
// rest of code
});
This <br ng-show="{{data.shouldBreak}}" /> won't work since AngularJs throws an exception with the following message Template must have exactly one root element.
Also messing with compile on the directive like so but that results only in the <br /> being inserted after the very last iteration (after the repeater is done working)
var app = angular.module('test', []);
app.directive('hexagon', function () {
return {
...
compile: function($scope, el, attrs){
return function ($scope, el, attrs){
if($scope.data.shouldBreak !== undefined){
el.after('<br />');
}
};
}
}
});
I've read the documentation when it comes to directives and either I'm just stupid or I'm missing the obvious so please help me out.
End of walloftext and maybe some sleep will do the trick. Jump back on the horse tomorrow so to speak.

Answer 1

So I managed to come to a solution after being away for a couple of days and then when I returned to town I tackled my problem again.
The solution
The view
<hexagon ng-repeat="person in ledning" data="person" layout="layout"></hexagon>
The controller:
var app = angular.module('test', []);
app.controller('About', function ($scope) {
...
$scope.layout = [2,4]; // what index (inside ngRepeat) should we break on
}
});
and the directive
app.directive('hexagon', function ($timeout) {
...
return {
...
scope: {
data: '=',
layout: '=' // grab the data bound to 'layout'
},
link: function ($scope, el, attrs) {
$timeout(function(){
for (var i = 0; i < $scope.layout.length; i++) {
if ($scope.layout[i] == $scope.$parent.$index)
el.after('<br />');
}
}, 0);
}
};
});
A working example can be seen here http://jsfiddle.net/engstrumpan/yCv79/5/.
So if I for instance were to work with 10 items I could set $scope.layout = [2,6] to get the following output in this jsFiddle
So how did I end up with this solution? Well I have to thank this guy (Lorenz Merdian) and his blog for it. At least when it comes down tho the use of $timeout to give the browser enough time to render the DOM for the element so I could insert my <br />
It might not be the most elegant solution but it works for me in this particular scenario

Answer 2

You could use pseudoclasses to insert a carriage return "\a" either before :before or after :after the element in question (although if you are supporting legacy browsers, this ain't for you).
CSS:
.last:before {
content: "\A";
white-space:pre;
}
And a conditional ng-class to set the line-breaking class, where item.lineBreak contained true or false depending on its order in the group:
ng-class="{last:item.lineBreak}"
That is the basic answer, and here's the working plunk with the ng-class on the element.
Fork of the plunk with the ng-class on the root element in the template. Same result.
..
..
The tricky/fun part is being able to dynamically insert that class/pseudoclass into the correct elements without hardcoding them. It looked like you wanted a pyramid (Fibonacci wannabe) design (which is what looked interesting about this question).
What I did was use a pretty basic looping process to insert the true property - (from the above example item.lineBreak) - into the items which were the 1st, 3rd, 6th, 10th, (and on) items in the ng-repeat. I put this in a $watch of a select-box model so you could choose the number of items in the group.
Here's the $watch and
var findFib = function(index){
if(index==increment){
rowLength += 1;
increment = rowLength + increment;
return true;
}
return false;
}
$scope.$watch('collectionAmount.value', function(val){
$scope.collection = [];
rowLength = 1;
increment = 1;
var i = 1;
//loop through the items, using the Fibonacci-like
//method to determine which items will recieve the
//lineBreak property of true;
while(i<=val){
var f = findFib(i);
$scope.collection.push({number: i, lineBreak: f});
console.log($scope.collection[i-1]);
i++;
}
//reverse the array if using :before pseudoclass to get upside-down pyramid:
$scope.collection.reverse();
})
From there, the ng-class conditionally applied the .last class which contained the :before pseudoclass that inserted the return. This could easily be scaled to fit your more complex markup.