I'm kinda new to angular and would appreciate any assistance. I am creating a simple reporting system which has following structure
A Report can have many Subreports
and Subreports can have many Tasks.
Here's the my code structure
var Report = {
"ReportId":1,
"ReportDate":"02/05/2015",
"SubReport":[
{
"SubId": 1,
"ProjectName": "An ice sculpture",
"ProjectDeliverable":"My Deliverable1",
"ProjectTarget":"My Target1",
"Task":[
{
"TaskPerformed": "Task Performed 1 of 1",
"TimeSpent": 3,
"ResultAchieved": "Result 1 of 1" ,
"PlannedActivity": "Planned Activity 1 of 1"
}]
}]
};
<table class="table table-bordered table-condensed">
<tbody ng-repeat="subrep in Report.SubReport">
<tr>
<td>
<table class="table table-bordered table-condensed">
<thead ng-show="$index==0">
<tr>
<th >ACTION</th>
<th>Project Name</th>
<th>Project Deliverable</th>
<th>Target</th>
<th>Task Performed</th>
<th>Time Spent(Hrs)</th>
<th>Result Achieved</th>
<th>Planned Activity</th>
<th >ACTION</th>
</tr>
</thead>
<tbody>
<tr ng-show="$index==0" ng-repeat="tsk in subrep.Task">
<td>
<div class="btn-group">
<a class="btn btn-info" href="" ng-click="addNew()" ng-
show="$parent.$index==0" title="New SubReport" >
<i class="fa fa-plus"></i>
</a>
<a class="btn btn-green" href="" title="Edit SubReport" data-
toggle="modal" data-target="#">
<i class="fa fa-pencil-square-o"></i>
</a>
<a class="btn btn-danger" title="Delete SubReport" href="">
<i class="fa fa-trash-o"></i>
</a></div>
</td>
<td>{{subrep.ProjectName}}</td>
<td>{{subrep.ProjectDeliverable}}</td>
<td>{{subrep.ProjectTarget}}</td>
<td>{{tsk.TaskPerformed}}</td>
<td>{{tsk.TimeSpent}}</td>
<td>{{tsk.ResultAchieved}}</td>
<td>{{tsk.PlannedActivity}}</td>
<td>
<div class="btn-group">
<a class="btn btn-info" href="" data-toggle="modal" title="New
Task" data-target="#NewTask">
<i class="fa fa-plus"></i>
</a>
<a class="btn btn-green" href="tsk={{$index}}/sub={{$parent.
$index}}" title="Edit Task" data-toggle="modal" data-target="#defaultmodal">
<i class="fa fa-pencil-square-o"></i>
</a>
<a class="btn btn-danger" title="Delete Task" href="">
<i class="fa fa-trash-o"></i>
</a>
</div>
</td>
</tr>
<tr ng-show="$index>0" ng-repeat="tsk in subrep.Task">
<td colspan="4"></td>
<td>{{tsk.TaskPerformed}}</td>
<td>{{tsk.TimeSpent}}</td>
<td>{{tsk.ResultAchieved}}</td>
<td>{{tsk.PlannedActivity}}</td>
<td>
<div class="btn-group">
<a class="btn btn-green" href="tsk={{$index}}/sub={{$parent.
$index}}" title="Edit Task" data-toggle="modal" data-target="#defaultmodal">
<i class="fa fa-pencil-square-o"></i>
</a>
<a class="btn btn-danger" title="Delete Task" href="">
<i class="fa fa-trash-o"></i>
</a>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
my Factory which attempts to save a subreport in an existing Report
fac.AddSubReport = function (data) {
Report.SubReport.push(data);
return Report;
}
return fac;
enter code here
I have two challenges..
When I get the data from a txt file I can't get to display the my table with a single header as below :
SubId | ProjName | TaskId | TaskName
- Abc. 1. Task1-1 .......... 2. Task1-2 .......... 3. Task1-3
- Proj2. 1. Task2-1 ......... 2. Task2-2
Here I used nested ng-repeat but I seem to iterate over the tasks using ng-show first line of subreport info if $parent.$index=0, but it keeps creating a new table for the subreport.
How do I add/push a subreport to a report without having a task
I would appreciate any assistance. I'm using my phone else would have posted some of my code.
Notice how i have used the ng-repeat on the Task so as to show only subreports with task index =0. I only want to have the subreport information displayed only on the first task. I am using a Modal to save the subreporrt, but the problem is that no subreport is displayed since as at the time of saving a subreport it doesnt have a task- henc its not displayed.
I would want to know the best approach to saving a subreport first before adding a task to it and how i can get the information to be displayed correctly on the table
