kennechu kennechu - 6 months ago 39
jQuery Question

Cant display row in an HTML table using angular ng-repeat and jquery

I have an HTML table that expands or collapse depending if the user clicks on a row, the main record is the "parent" row, if you click it you'll see a child row that displays some records, my issue is that I add a third row that should display by default because the child is hidden until you click on the parent but that third row wont appear and I cant figure out the problem =(

Here's my example in a fiddle and below youll see my directive.

angular
.module('app',[])
.controller('DataCtrl',DataCtrl)
.directive('drillDown',drillDown);

function DataCtrl($scope) {
$scope.category = [
{
"desc": "CATEGORY 1",
"LW$": "45",
"LW": "-4%",
"L4W": "-15.7%",
"L13W": "24%",
"L52W": "-6%"
}
]

$scope.subcat = [
{
"desc": "SUB CATEGORY 1",
"LW$": "45",
"LW": "-4%",
"L4W": "-15.7%",
"L13W": "24%",
"L52W": "-9%"
},
{
"desc": "SUB CATEGORY 2",
"LW$": "15",
"LW": "4.2%",
"L4W": "1.7%",
"L13W": "-2.4%",
"L52W": "-65%"
},
{
"desc": "SUB CATEGORY 3",
"LW$": "767",
"LW": "4.2%",
"L4W": "9.7%",
"L13W": "-2.4%",
"L52W": "-21%"
},
{
"desc": "SUB CATEGORY 4",
"LW$": "21",
"LW": "14.2%",
"L4W": "1.7%",
"L13W": "-42.4%",
"L52W": "-34%"
}
];
}

function drillDown() {

var directive = {
restrict: 'A',
link: link
};

return directive;

function link(scope,element) {

var table = $('.categories-table');

table.each(function() {
var $table = $(this);
$table.find('.parent').each(function(){
if($(this).nextUntil('.parent', ".child").length > 0){
$(this).children('td:first').html('+');
}
});
$table.find('.child').each(function(){
if($(this).nextUntil('.child', ".grandson").length > 0){
$(this).children('td:first').html('+');
}
});

var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').click(function() {
$childRows.hide();

});
});
element.on('click',function(){
if($(this).parent().hasClass('parent') == true)
{
console.log("----Parent");
if ($(this).text() == "+")
$(this).text("-")
else
$(this).text("+");

$(this).parent().nextUntil('.parent', ".child").fadeToggle("slow", "linear");
$(this).parent().nextUntil('.parent', ".grandson").hide("fast");
$(this).parent().nextUntil('.parent', ".child").each(function(){

if($(this).children('td:first').text() == '-')
$(this).children('td:first').text('+');
});
}
else if($(this).parent().hasClass('child') == true)
{
console.log("----Child");
if ($(this).text() == "+")
$(this).text("-")
else
$(this).text("+");
$(this).parent().nextUntil('.child', ".grandson").fadeToggle("slow", "linear");
}
});
}
}

Answer

First of all I recommend you to read this topic: "Thinking in AngularJS" if I have a jQuery background?

Obviously you are using jquery+angular in a wrong way. And there is a logic error in your jQuery code.

If you want to solve problem in angular-way:

One possible solution is to use scope variables or object variables and ng-show directive.

Something like this: https://jsfiddle.net/p7ew017u/4/

<td ng-class="expand" ng-click="d.expanded = !d.expanded">+</td>

And one more thing: tables are not very good for displaying tree structures (like categories, subcategories, subsubcategories, etc). It is better to use lists (ul, ol)

Comments