When using ng-repeat to build a table row inside a table based on specific logic using the "row" value, empty tr elements are being generated. How can these be removed?
This code is resulting in 2 empty tr elements at the end of the tbody.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [
{
"name" : "John",
"row" : 1
},
{
"name" : "Mike",
"row" : 2
},
{
"name" : "Bill",
"row" : 1
},
{
"name" : "Alice",
"row" : 3
},
{
"name" : "David",
"row" : 2
}
]
});
app.directive('specrow', ['$compile', function($compile) {
return {
restrict: 'A',
scope : {
'specobj' : '=',
'specitemindex' : '='
},
link: function (scope, elem, attrs){
var template = "<td><span>{{specobj.name}}</span></td>";
var linkFn = $compile(template);
var content = linkFn(scope);
var trEl = angular.element(elem[0].parentElement.children).eq(scope.specobj.row-1);
if(trEl.length === 0) {
elem.append(content);
}else{
angular.element(elem[0].parentElement.children).eq(scope.specobj.row-1).append(content);
}
}
}
}]);