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
Related
Inside an ng-repeat I have a table in which I display information using Bootstap collapse, however I need the id to be changed with the loop in order for the data to be displayed in the right place, with my current code it keeps displaying in the same row with each click, here is my code :
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" data-target="#d">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul id="d" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>
I believe you wanted to do something like:
<tr ng-repeat=" p in projetsListe ">
<td>{{p.NomProjet}}</td>
<td>{{calcul(p.IdProjet)}}</td>
<td>{{calculTotal(p.IdProjet)}}</td>
<td>{{calcul(p.IdProjet)-calculTotal(p.IdProjet)}}</td>
<td>
<a href="#" ng-click="myFunction(p.IdProjet)" data-toggle="collapse" ng-attr-data-target="#{{p.IdProjet}}">
<i class="fa fa-eye"></i>
<span>Voir les détails</span> <i class="fa fa-fw fa-caret-down"></i></a>
<ul ng-attr-id="{{p.IdProjet}}" class="collapse">
<table id= "mytable" class="table table-hover" style="display : none;">
<thead>
<tr>
<th>Tache</th>
<th><center>Charge estimée</center></th>
<tr ng-repeat="t in tempnorep">
<td>{{t.NomTache}}</td>
<td><center>{{t.TempsPrevu}} jours<center></td>
</tr>
</table>
</ul>
</td>
</tr>
ok i have this code:
<table class="table">
<thead>
<tr>
<th>
Description
</th>
<th>
Amount
</th>
<th>
Period
</th>
</tr>
</thead>
<tbody data-ng-repeat="expense in expenses">
<tr class="danger">
<td>
<button data-ng-if="expense.Children.length > 0 && expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = false">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button data-ng-if="expense.Children.length > 0 && !expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = true">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
{{ expense.Description }}
</td>
<td>
{{ expense.Amount }}
</td>
<td>
{{ expense.Period }}
</td>
</tr>
<tr class="active" ng-show="expense.ShowChildren" data-ng-repeat="child in expense.Children">
<td>
{{ child.Description }}
</td>
<td>
{{ child.Amount }}
</td>
<td>
{{ child.Period }}
</td>
</tr>
</tbody>
</table>
now i want to expense can have a child like u see in the photo
and this is work but when the child have child how I display that ?
i want to do the plus/minus button
I have been using a table from swimlane with much success lately. This is a feature that they support. This table is available here.
http://swimlane.github.io/angular-data-table/
You can do it, but you basically have to use expressions that insert the buttons where appropriate and ng-show/css to hide and display the rows when the buttons are clicked and a lot of other manual work.
I found a easy way to do it
Tree View: http://jsfiddle.net/brendanowen/uXbn6/8/
its better then other ways and more simple
I'm using the very good table library Smart-table to display my data.
I am using a custom pagination template. I would however like to be able to set page 1 from the code. I have read up on the st-pipe directive it exposes, but it seems that I would need to re-write the whole filtering/pagination/sorting code myself if I implement that.
I'm after a simple way to programatically set a page from outside of the st-pagination directive that exists in my table's tfoot
<table st-table="displayedCollection" st-safe-src="tags" class="table table-hover">
<tbody>
<tr st-select-row="tag" st-select-mode="single" ng-repeat="tag in displayedCollection" ng-click="click(tag)">
<td>
<span editable-text="tag.name" e-placeholder="enter a display name..." e-name="name" e-form="editableForm" e-required>
{{tag.name}}</span>
</td>
<td>
<span editable-text="tag.path" e-placeholder="enter actual value to be used..." e-name="path" e-form="editableForm" e-required>
{{tag.path}}</span>
</td>
<td>
<form editable-form shown="newItem == tag" onshow="onShow()" name="editableForm" oncancel="oncancel(newItem)" onaftersave="saveForm(tag)">
<!-- EDIT -->
<button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$visible">
<i class="fa fa-pencil-square-o fa-lg"></i>
</button>
</form>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1" class="text-left">
<div st-template="app/partials/pagination.html" st-pagination="" st-items-by-page="pager.itemsOnPage"></div>
</td>
<td colspan="1">
<div class="btn-group btn-group-sm pull-right ng-scope">
<button type="button" ng-class="{'active':pager.itemsOnPage==5}" ng-click="pager.itemsOnPage=5" class="btn btn-default">5</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==10}" ng-click="pager.itemsOnPage=10" class="btn btn-default">10</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==20}" ng-click="pager.itemsOnPage=20" class="btn btn-default">20</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==30}" ng-click="pager.itemsOnPage=30" class="btn btn-default">30</button>
</div>
</td>
</tr>
</tfoot>
</table>
I'd like to be able to set page on from the <form> sections onshow directive.
Does anyone know if this is possible? Many thanks.
To set the angular-smart-table page number from code use st-pagination's selectPage() function.
Where your HTML has a paginator element like this:
<div id="pagerId" st-pagination="" st-items-by- ...
You could use code like this in your directive
function setPage(pageNumber)
{
angular
.element( $('#pagerId') )
.isolateScope()
.selectPage(pageNumber);
}
You need to have jQuery installed to use $. I got the idea from the last example on: http://lorenzofox3.github.io/smart-table-website/
I've got two JSON arrays, one for headers and the other for data. I'm handling the headers, and I'm trying to display the data with respect to those headers using nested ng-repeat, but it results in empty rows.
The JSON arrays and the html code for displaying the data are pasted below.
Please help me.
$scope.data=[{'first_name':'ruth','last_name':'vick','email':'ruthvick#gmail.com','isMarried':'no','nick_name':'ruthu'},{'first_name':'rahul','last_name':'kumar','email':'rahul#gmail.com','isMarried':'no','nick_name':'rahul'},{'first_name':'vicky','last_name':'gupta','email':'vicky#gmail.com','isMarried':'no','nick_name':'vicky'}]
$scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]
<div>
<table class="table table-bordered table-hover">
<thead class="wrapper">
<tr>
<th ng-repeat="data in header">
<div class="col-md-9">{{data.displayName}}</div>
<div class="col-md-1">
<button href="" ng-click="deleteColumn(data.field,$index)"><span class=" glyphicon glyphicon-trash pull-right"> </span></button>
</div>
<div class="dropdown col-md-1" >
<button class="glyphicon glyphicon-pencil dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click = "toPoint($index);">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="dataEdit in headerAll"><a role="menuitem" tabindex="-1" href="" ng-click="editColumn(data.field,dataEdit.field,$index)">{{dataEdit.displayName}}</a></li>
</ul>
</div>
</th>
<th><div class="dropdown" >
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Add Columns
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
<li role="presentation" ng-repeat="optionalHeader in optional"><a role="menuitem" tabindex="-1" href="" ng-click="addColumn(optionalHeader.field)">{{optionalHeader.displayName}}</a></li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody >
<tr class="active" ng-repeat="row in data">
<td ng-repeat="fields in headerAll">
{{row.fields.field}}
</td>
</tr>
</tbody>
</table>
</div>
Here, row.fields.field is creating empty rows.
Try to access with braces and not the dot operator.
data:
<div ng-repeat="obj in data">
{{ obj["first_name"]}}
{{ obj["last_name"]}}
</div>
header
<div ng-repeat="obj in headerAll">
{{ obj["field"]}}
{{ obj["displayname"]}}
</div>
I have this table
<table class="table">
<thead>
<tr>
<th class="col-sm-5">Actions</th>
<th class="col-sm-5">Title</th>
<th class="col-sm-2">Saved</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="calc in calculations">
<td>
<a class="btn btn-default btn-sm" ng-click="removeCalculation(calc.calcId)">
<i class="fa fa-trash-o"></i>
</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-bar-chart-o"></i>
</a>
<a class="btn btn-default btn-sm" ng-href="#/user/{{user.userId}}/calculation/{{calc._id}}">
<i class="fa fa-folder-o"></i>
</a>
<a id="copyCalcButton" class="btn btn-default btn-sm" ng-click="copyCalculation(calc.calcId)">
<i class="fa fa-copy"></i>
</a>
</td>
<td>{{calc.title}}</td>
<td>{{calc.savedAt}}</td>
</tr>
</tbody>
</table>
I want to e2e my copyCalculation-feature. So first I want to check my length of my array:
var nrOfCalc = browser.element.all(by.repeater('calc in calculations')).count();
The I'd like to press a the first item in my table and then check if there is one more item in m y array.
How do I click on the first item in my table?
I tried something like this but I got stuck.
var firstRowIn;
browser.findElements(protractor.By.tagName('tr')).then(function(rows){
firstRow = rows[0];
});
Some pseudo code:
firstRow...click('on the id="copyCalc")
Appreciate any help!
Try this:
element(by.repeater('calc in calculations').row(0)).$('#copyCalc').click()
or
element(by.repeater('calc in calculations').row(0)).element(by.css('#copyCalc')).click()
Andre's answer is close. You just need to use get() instead of row():
element(by.repeater('calc in calculations').get(0)).$('#copyCalc').click()
browser.findElements(protractor.By.repeater('calc in calculations').then(function (table) {
table.findElements(protractor.By.tagName('tr').then(function(rows) {
//firstRow = rows[0];
row[0].click();
});
});
Hopefully this helps.