I want to show json data inside a table using AngularJS ng-repeat but my first row of the table remains empty as I am not accessing the first row of json data.I want to omit the first row of json data inside the table. How to achieve this?
My json format :
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
Try using ng-if like this
<tr ng-repeat="data in list1" ng-if="$index > 0">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
Change code like :
<tr ng-repeat="data in list track by $index" ng-if="!$first">
Simply ng-if and there's no need for increasing $index shown.
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list" ng-if="$index">
<td> {{$index }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1" ng-if="$index">
<td> {{$index }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
If you want to omit the first row in ng-repeat, you can track row's with $index on skip $index = 0 using ng-if
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('MyCtrl', function($scope) {
$scope.list = [
{"dept_id":"d10","dname":"dname"},
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
$scope.list1 = [
{"eid":"10","ename":"nam1"},
{"eid":"20","ename":"nam2"},
{"eid":"30","ename":"nam3"},
{"eid":"40","ename":"nam4"}
];
});
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list track by $index" ng-if="$index > 0">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
But I want like this :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr</th>
<th>Employee ID</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in list1">
<td> {{$index+1 }} </td>
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I have a Laravel Vue.js 2.0 Project and I don't know why I'm getting the result but when I tried to use v-model to an input field. it is not reactive or maybe all inside the page is not reactive. The welcome.js has el which is linked to #app id where in located in app.blade.php.
I tried to check also in chrome devtools > Vue > Root > nothing display. It says this instance has no reactive state.
Here's my blade files:
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
#if (isset($background))
<body style="background: url( {{ $background }});">
#else
<body>
#endif
<div id="app">
#yield('navbar')
<main class="py-4">
#yield('content')
</main>
</div>
#yield('script')
</body>
</html>
welcome.blade.php
#extends('layouts.app', ['background' => asset('img/pattern.svg')])
#extends('components.navbar-customer')
#php
$steps = [
[
'id' => 1,
'name' => 'PRE-PLANNING',
'color' => 'violet'
],
[
'id' => 2,
'name' => 'PLAN YOUR MAP',
'color' => 'gold'
],
[
'id' => 3,
'name' => 'PLAN YOUR READING',
'color' => 'blue'
],
[
'id' => 4,
'name' => 'PEN TO PAPER',
'color' => 'pink'
],
[
'id' => 5,
'name' => 'PRUNE IT BACK',
'color' => 'green'
],
[
'id' => 6,
'name' => 'PAUSE TO PROCESS',
'color' => 'indigo'
],
[
'id' => 7,
'name' => 'POLISH IT UP',
'color' => 'peach'
]
];
#endphp
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-12">
<div class="section section-card p-5 blue">
<div class="full-width">
<div class="header text-black text-center font-weight-bold orange p-1">
<label class="header-text">Assignment Calculator</label>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 mt-4">
<table class="full-width">
<thead>
<tr>
<th class="yellow" scope="col" colspan="2">Assignment #1</th>
<th class="peach" scope="col" colspan="1">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="green">Start Date</td>
<td class="white">
</td>
<td class="light-peach">14</td>
</tr>
<tr>
<td class="green">End Date</td>
<td class="white">
</td>
<td class="light-peach">#{{ getTotalDays }} Days</td>
</tr>
</tbody>
</table>
<div class="pt-3 pb-3 white">
<input type="text" v-model="assignment.one.start">
<input type="text" v-model="assignment.one.end">
</div>
<table class="full-width">
<thead>
<tr>
<th class="yellow" scope="col" colspan="2">Assignment #2</th>
<th class="peach" scope="col" colspan="1">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="green">Start Date</td>
<td class="white">04/05/2020</td>
<td class="light-peach">14</td>
</tr>
<tr>
<td class="green">End Date</td>
<td class="white">18/05/2020</td>
<td class="light-peach">Days</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6 col-md-12 mt-4">
<table class="full-width">
<thead>
<tr>
<th class="yellow" scope="col" colspan="2">Assignment #1</th>
<th class="peach" scope="col" colspan="1">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="green">Start Date</td>
<td class="white">04/05/2020</td>
<td class="light-peach">14</td>
</tr>
<tr>
<td class="green">End Date</td>
<td class="white">18/05/2020</td>
<td class="light-peach">Days</td>
</tr>
</tbody>
</table>
<div class="pt-3 pb-3 white"></div>
<table class="full-width">
<thead>
<tr>
<th class="yellow" scope="col" colspan="2">Assignment #2</th>
<th class="peach" scope="col" colspan="1">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="green">Start Date</td>
<td class="white">04/05/2020</td>
<td class="light-peach">14</td>
</tr>
<tr>
<td class="green">End Date</td>
<td class="white">18/05/2020</td>
<td class="light-peach">Days</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="section section-card p-5 orange mt-4">
<div class="full-width">
<div class="header text-black text-center font-weight-bold blue p-1">
<label class="header-text">Assignment Calculator</label>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 mt-4">
#foreach ($steps as $step)
<table class="full-width">
<tbody>
<tr>
<td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
<label class="vertical-text text-center">STEP {{ $step['id']}}</label>
</td>
<td class="{{ $step['color'] }}-light p-2">Resources</td>
<td class="{{ $step['color'] }}-light p-2">Notes</td>
</tr>
<tr>
<td class="white"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white"></td>
<td class="white"></td>
</tr>
</tbody>
</table>
#endforeach
</div>
</div>
</div>
<div class="footer section section-card mt-4 p-5">
<label class="font-weight-bolder text-center full-width">
#2020 Dr Irene Dudley-Swarbrick, Al Rights Reserved
</label>
</div>
</div>
<div class="col-lg-4 col-md-12" id="right">
<div class="section section-card p-5 orange">
#foreach ($steps as $step)
<table class="full-width">
<thead>
<tr>
<th class="{{ $step['color'] }}-pure text-white" scope="col" colspan="1">Step {{ $step['id'] }}</th>
<th class="{{ $step['color'] }}-light" scope="col" colspan="2">{{ $step['name'] }}</th>
</tr>
</thead>
</table>
<table class="full-width">
<thead>
<tr>
<th class="green font-weight-bold">ASSIGNMENTS</th>
<th class="green font-weight-bold">COMPLETION DATES</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dirty-green">Module #1</td>
<td class="dirty-green">04/05/2020</td>
</tr>
<tr>
<td class="dirty-gray">Module #2</td>
<td class="dirty-gray">04/05/2020</td>
</tr>
<tr>
<td class="dirty-green">Module #3</td>
<td class="dirty-green">04/05/2020</td>
</tr>
<tr>
<td class="dirty-gray">Module #4</td>
<td class="dirty-gray">04/05/2020</td>
</tr>
</tbody>
</table>
<div class="pt-3 pb-3 white"></div>
#endforeach
</div>
</div>
</div>
</div>
#endsection
#section('script')
<script src="{{ asset('js/welcome.js') }}"></script>
#endsection
as you can see in welcome.blade.php, I tried to use v-model but it is not reactive when I tried to edit the input field. And also in the input field. And also, once the page is loaded, there's no value in the input field.
Output
welcome.js
window.Vue = require('vue');
let app = new Vue({
el: '#app',
data() {
return {
assignment: {
one: {
start: 2,
end: 6
}
}
}
},
computed: {
getTotalDays() {
let number = 'one';
return this.assignment[number].start - this.assignment[number].end;
}
}
});
So, I actually duplicated your files above and it is working for me. Are you seeing any errors in the Javascript console?
Here is what I am seeing with your code (no CSS since you didn't provide any):
I found out what the main cause of this problem.
In my app.js, there's also a vue there wherein it's el is linked to #app. So maybe, there's something reactivity issue or vue issue here.
So when I tried to remove this part, I solved my problem.
Here's my app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
^ // So removing that part solved my problem.
I have to the below JSON data in a bootstrap table. I can show the one level data, but I don't know how to show array inside array data in bootstrap table.
[
{
"seriesName": "Indian Bank",
"dataVlaues": {
"11/12/2017": 50,
"11/13/2017": 40,
"11/14/2017": 60,
"11/11/2017": 100
}
},
{
"seriesName": "Indian Bank1",
"dataVlaues": {
"11/18/2017": 12,
"11/17/2017": 27,
"11/16/2017": 30,
"11/15/2017": 101
}
}
]
Please find working solution below, enjoy :)
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.userTypes = [{
"type": 'Parent',
"options": {
"option1": "11QWERT",
"option2": "22QWERT"
}
}, {
"type": 'Parent1',
"options": {
"option22": "11QWERT",
"option222": "22QWERT"
}
}];
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="user in userTypes">
<td>{{user.type}}</td>
<td>
<button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
Show
</button>
</td>
</tr>
<tr ng-repeat-end ng-if="showOptions">
<td colspan="2">
<table class="table table-bordered">
<tbody>
<tr ng-repeat="(key, val) in user.options">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Please check this jsfiddle link
https://jsfiddle.net/lalitSachdeva1/0xb732e1/1/
I have updated the ul li to table like structure;
your js will remain same and the key concept here is ng-repeat-start and ng-repeat-end
<div ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<thead>
<tr>
<td>parent</td>
<td>option1</td>
<td>option2</td>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in userTypes">
<td>{{user.type}}</td>
<td ng-repeat-start="(key,value) in user.options">{{key}}</td>
<td ng-repeat-end="(key,value) in user.options">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.
Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>
Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO
I am using angularjs and i want to create dynamic row with ng-repeat but unable to achieve. I will clear after see my code. Here is my code and jsfiddle:-
td.controllers.js
function TodoCtrl($scope) {
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
}
td.html
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products" colspan="2">{{product.name}}</th>
</tr>
<tr>
<th>A</th> //I want to dynamic it
<th>B</th> //
</tr>
</thead>
</table>
</div>
</div>
My desire output is:-
-----------------------------
Month | Abc | Bil | Smart
| A|B | A|B | A|B
----------------------------
<div ng-app>
<div ng-controller="TodoCtrl">
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th> <!--I want to dynamic it-->
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</div>
Try this code
Here table header is created dynically and table data also.
Let me know if you are getting nay problem
try this
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script>
var app=angular.module("myapp", []);
app.controller("namesctrl", function($scope){
$scope.products = [{
name: 'Abc'
}, {
name: 'Bil'
}, {
name: 'Smart'
}];
});
</script>
</head>
<body ng-app="myapp" ng-controller="namesctrl">
<div>
<table class="table">
<thead>
<tr>
<th rowspan="2">Month</th>
<th ng-repeat="product in products">{{product.name}}</th>
</tr>
<tr>
<th></th>
<th ng-repeat="product in products">A|B</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
I want to achieve the above image using angular-js ng-repeat. i got a problem for the third column.
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showMainCategory.notSortBy"></thead>
<tbody>
<tr ng-repeat="tcs in rows">
<td>{{tcs.trackName}}</td>
<td>
<table align="left">
<tbody>
<tr ng-repeat="category in tcs.category">
<td>{{category.categoryName}}</td>
<td>
<table> //this one should be on the 3rd <td> of parent table
<tbody>
<tr ng-repeat="skill in category.skill">
<td>{{skill.skillName}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>
This is what i have tried so far and the output is not what i want as shown in the sample image. The problem is how to output the last data which is skills in the third of the parent table.
Found an answer, not quite good since it keeps repeating the tbody but its still ok
<div class="row-fluid" style="padding-top: 2%">
<div tasty-table
bind-resource-callback="showTCS.loadAllTCS"
bind-init="showTCS.init"
bind-filters="showTCS.listParams"
bind-reload="showTCS.reloadCallback">
<table class="table table-striped table-condensed table-hover table-bordered table-overflow"
cellpadding="4"
cellspacing="4"
align="center">
<thead tasty-thead bind-not-sort-by="showTCS.notSortBy"></thead>
<tbody ng-repeat="tcs in rows">
<tr ng-repeat="category in tcs.category">
<td class="text-center" style="vertical-align:middle;">{{tcs.trackName}}</td>
<td class="text-center" style="vertical-align:middle;">{{category.categoryName}}</td>
<td>
<ul class="list-unstyled" >
<li ng-repeat="skill in category.skill">{{skill.skillName}}</li>
</ul>
</td>
<td align="center">
<a ui-sref="mainCategoryDetails( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-eye-open"></a>
<a ui-sref="editMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-edit"></a>
<a ui-sref="deleteMainCategory( {mainCatId: mainCategory.mainCat_id} )" class="glyphicon glyphicon-minus-sign"></a>
</td>
</tr>
<tr>
<td ng-if="(!rows.length)" colspan="4" class="text-center">No results found.</td>
</tr>
</tbody>
</table>
<div tasty-pagination bind-items-per-page="showTCS.itemsPerPage" bind-list-items-per-page="showTCS.listItemsPerPage"></div>
</div>