My aim is to have a flexible number of tables and the tables being themselves dynamic.
This is my html code so far.
<div ng-repeat="deviceType in vm.devicesType">
<h2 ng-click="collapse=!collapse">My {{deviceType}}s <Strong ng-show="collapse">-</Strong><Strong ng-show="!collapse">+</Strong></h2>
<div ng-show="collapse">
<table ng-table-dynamic="user.controller.js.TableParams(deviceType) with user.controller.js.Columns(deviceType)">
<tr ng-repeat="device in (deviceType)" ng-if="$index==0">
<th ng-repeat="(key,value) in device" >
{{key}}
</th>
</tr>
<tr ng-repeat="device in (deviceType)")>
<td ng-repeat="(key,value) in device">
{{value}}
</td>
<td>
<a ng-click="vm.GetDeviceDetails(relay.id)">Details</a>
</td>
</tr>
</table>
</div>
</div>
The javascript is not the issue as the variables are well evaluated, however for now my output is an array with R e l a y ( in seperate rows ), Relay being a device type.
I would like to have the variable (deviceType) evaluated, when I replace with Relay, I have no issues.
Thank you for your help.
Related
I want to access the chosen mfRowsOnPage. For example now it is 10.
Later the user might choose 5 or 15. I need this data in component. I
even want to get which page data is shown to the user. Example 1st
page or 2nd page , so on.
this is my table.
<table class="table" [mfData]="stacklist_table| selectedcolumn | search : searchQuery | filter: addFilter : selected" #stacklist="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th *ngFor="let colValues of stacklist.data | column: '' : ''">
<mfDefaultSorter by="{{colValues}}">{{colValues|translate}}</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr draggable *ngFor="let stack of stacklist.data" [dragOverClass]="'drag-over-border'" [dragData]="stack" [class.active]="checkIfStackElementIsSelected(stack)" (click)="setStacklistRow(stack, $event)">
<td *ngFor="let rowValues of stack | row">{{ rowValues }}</td>
</tr>
</tbody>
<tfoot>
<tr style="height: 50px;">
<td colspan="6">
<mfBootstrapPaginator [rowsOnPageSet]="[50,100,150]" style="position:fixed; margin-top: -15px"></mfBootstrapPaginator>
<!-- <mfBootstrapPaginator [hidden]='!hideElement' (dblclick)="eventEmitDoubleClick($event)" [rowsOnPageSet]="totalVisibleCount"></mfBootstrapPaginator> -->
<!-- <input [hidden]='hideElement' [(ngModel)]="newCount" (click)="doneEditing(newCount)" autofocus /> -->
</td>
</tr>
<tr (click)="loadMoreStackElements()">Load more</tr>
</tfoot>
</table>
How do I go about it?
I am new to it and not understanding the way to access this data.
https://www.npmjs.com/package/angular2-datatable
Can you try [attr.mfRowsOnPage]='10' and check if that works.
<body ng-controller="testeCtrl">
<img src="http://adsim.co/wp-content/uploads/2015/11/adsim_logo_cores_2x.png" alt="#" class="logo">
<div class="jumbotron barraPrincipal" ng-app="teste">
<div class="table-responsive">
<table class="table">
<tr ng-repeat="i in getNumber(number) track by $index">
<th>
<select class="logo form-control" ng-model="refrigerante" ng-options="refrige as (refrige.nome+' '+refrige.quantidade) for refrige in refri">
<option value="">
<h4>Selecione o refrigerante</h4></option>
</select>
</th>
<th>
<input class="form-control" type="number" min="1" placeholder="Informe a quantidade" ng-model="quantidade"></input>
</th>
<th>
<h4>Valor Unitário: {{refrigerante.preco | currency:'R$' }}</h4>
</th>
<th>
<h4 ng-show="refrigerante != null && quantidade > 0 && quantidade != 0" ng-model="i.fields[$index].item_count" name="item_count">Valor dos produtos: {{va = quantidade*refrigerante.preco | currency:'R$'}} </h4></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- total value of refrigerante.preco*quantidade here -->
<td>Valor total <span> </span></td>
</tr>
</table>
</div>
</div>
</div>
</body>
If you want to sum something, ng-repeat will probably not help. You can define a filter or call a function on the scope like this in the html: {{calculateSum()}}
https://docs.angularjs.org/api/ng/filter/filter
First, you have a lot of semantic errors in your HTML, one of them is in the <input> tag. It's a self-closing tag, so you don't need close it. Also, you are trying to get the total value outside the ngRepeat...
To achieve what you want just create a function in your controller, as below:
$scope.total = function(refrigerante, quantidade) {
return refrigerante.preco * quantidade;
}
Then call it in your view:
<tr ng-repeat="i in getNumber(number) track by $index">
...
<td ng-bind="'Valor total ' + total()"></td>
<!-- Or -->
<td>Valor total {{total()}}</td>
</tr>
I have table in Html and table's rows are repeated angular-js directive called ng-repeat. And I am searching and ordering filters text input that have ng-model directive so I can filter any data. I use ui-bootstrap in my angularjs app.
Everything works but if user searchs and has no data in table then I want to show message with ng-show directive.
Here is my code.
<tbody>
<tr ng-repeat="item in HocaListesiDetails.slice(((currentPage-1)*itemsPerPage), (currentPage*itemsPerPage)) | filter:Search | orderBy:orderUserSelected " ng-style="item.TabloId == selectedHoca && {'background-color':'#ccc'}" ng-click="hocaSec(item.TabloId)">
<td>{{$index+1}}</td>
<td>{{item.AdSoyad}}</td>
<td>{{item.TcNumarasi}}</td>
<td>{{item.Telefon}}</td>
<td>{{item.DogumYeri}}</td>
<td>{{item.DogumTarihi | formattedFilter | date}}</td>
</tr>
<tr ng-show="FilteredHocaListesiDetails.length == 0" style="background:#fff;">
<td colspan="6">
<div class="alert alert-info">
<p class="text-center">Aradığınız kişi bulunamadı.</p>
</div>
</td>
</tr>
</tbody>
Try this
<tr ng-show="(FilteredHocaListesiDetails| filter:search).length == 0" style="background:#fff;">
<td colspan="6">
<div class="alert alert-info">
<p class="text-center">Aradığınız kişi bulunamadı.</p>
</div>
</td>
</tr>
I think, you need to include "filter:Search" in ng-show to check the length.
<tr ng-show="(list | filter:search).length==0">No Results</tr>
Here's the code:
<tr ng-repeat="param in tags[$index].parameters">
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth">List <span class="arrayParamArrow" ng-click="showArrayParams(param)" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span></div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-hide="!arrayCollapsed" ng-repeat="params in arrayParameter">
<td>{{params.name}}</td>
<td class="wordBreak">{{params.value}}</td>
</tr>
What i want is to be able to put second row ng-repeat below specific row in the first ng-repeat, specifically when ng-if=is_array(param) div is shown, because it indicates that there needs to be more sub rows for that one specific row. Thanks
I'm not sure what is the exact structure for your array and how you get params for rows on click. But to render it you should try to use ngRepeatStart and ngRepeatEnd directives.
Something like this (simplified a little for the demo):
<tr ng-repeat-start="param in tags.parameters" ng-init="param.arrayCollapsed = false">
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
</div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
<td>{{p.name}}</td>
<td class="wordBreak">{{p.value}}</td>
</tr>
<tr ng-repeat-end></tr>
From here you should be able to adjust it for your code.
Demo: http://plnkr.co/edit/tW3rUYXqoM9fTNHdOf9K?p=info
UPD: Better solution
Original code contains problem is that ngRepeatEnd tr is repeated for each iteration creating bunch of unnecessary empty tr. Not good.
Below is more more straightforward solution which uses two repeaters: one on tbody and the second on inner tr. Multiple tbodies is perfectly valid and it's even feels good that parameter rows are grouped together with their parent row into the same tbody.
<table class="table table-bordered table-condensed">
<tbody ng-repeat="param in tags.parameters" ng-init="param.arrayCollapsed = false">
<tr>
<td class="previewParamName">{{param.name}}</td>
<td>
<div ng-if="is_array(param)">
<div class="previewParamValue limitWidth" ng-click="param.arrayCollapsed = !param.arrayCollapsed">
List <span class="arrayParamArrow" ng-class="{'glyphicon glyphicon-chevron-down': !arrayCollapsed, 'glyphicon glyphicon-chevron-up': arrayCollapsed}"></span>
</div>
</div>
<div ng-if="!is_array(param)">
<div class="previewParamValue" tooltip-placement="bottom" tooltip="{{param.value}}" tooltip-trigger="mouseenter">{{param.value | limitTo : 25}}</div>
</div>
</td>
</tr>
<tr ng-if="is_array(param)" ng-repeat="p in param" ng-show="param.arrayCollapsed" class="params-row">
<td>{{p.name}}</td>
<td class="wordBreak">{{p.value}}</td>
</tr>
</tbody>
</table>
Demo: http://plnkr.co/edit/0V1hDOpl2wukKFeIZC1O?p=info
Here are my controller scopes
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':1,'AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
Here is my view
<table class="table">
<thead>
<tr>
<th>Name</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="{{ u.c.CAR }}">
</td>
</tr>
</tbody>
</table>
Now i want to check the checkboxes based on the value of the cars ng-checked="{{ u.c.CAR }}" but i am not able to set it. And i am not getting any errors in firebug. Does angularjs provide such expressions or not? If now, what is other solution?? I want it to be set in the view itself
Update: I should have done this long back. Here is my JSFIDDLE
If I understand correctly, you want to resolve the 1 or 0 as true and false. You should be able to do something like this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR] == 1">
</td>
</tr>
*Note: you don't need to interpolate { } inside ng-checked.
Here is an updated fiddle.
Yes, your expression is just a bit off:
ng-checked="u[c.car] == 1"
There is a mistake in your expression. Try this:
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in cars">
<input type="checkbox" ng-checked="u[c.CAR].toString() == '1'">
</td>
</tr>
I would also suggest ensuring that your data is either all strings or all integers, rather than a mix of both.
Maybe you can solve your problem revisiting your ng-repeat, if you write something like u as object in all, instead of u in all, you can use the u items in the way you're trying to, whatever take a look at this module of angular ui ng-grid it has a lot of option and it can acomplish your needs
#vishwakumar that's a plunker for you, youneed to download the css too to setting in the right way the row height but that's a way to solve you're problem and trust me, ng-grid can solve a lot of problems other than that plunker
EDIT
i have put on it the check too, if you need the comment to understand the code in the plunker write it in the comment of the answer and i'll do it
That is your answer. You have some lame quote in your "all" list! Plus, your ng-repeat template is wrongly written.
Your $scope should be initialized as
function DefaultCtrl($scope) {
$scope.all = [
{'ID':'1','NAME':'BOB','BMW':'1','AUDI':'0'},
{'ID':'2','NAME':'PETE','BMW':'0','AUDI':'1'}
];
$scope.cars = [
{'ID':'1','CAR':'BMW'},
{'ID':'2','CAR':'AUDI'}
];
}
Your $scope's DOM should be
<div ng-app="" ng-controller="DefaultCtrl">
<table class="table">
<thead>
<tr>
<th>NAME</th>
<th ng-repeat="c in cars">{{c.CAR}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in all">
<td>{{ u.NAME }}</td>
<td ng-repeat="c in u.BMW">
<input type="checkbox" ng-checked="{{ c }}">
<td ng-repeat="c in u.AUDI">
<input type="checkbox" ng-checked="{{ c }}">
</td>
</td>
</tr>
</tbody>
</table>
</div>
Your answer should be