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>
Related
I am trying to display a table with hashmap values.
my js hashmap is following:
self.userList["user1"] = {sms:true,email:false}
self.userList["user2"] = {sms:false,email:false}
self.userList["user3"] = {sms:true,email:true}
self.userList["user4"] = {sms:false,email:false}
and my view is following:
<tr ng-repeat="(user,value) in editRulesCtrl.userList">
<td>
{{user}}
</td>
<td>
<md-checkbox ng-model="{{value.sms}}"></md-checkbox>
</td>
<td >
<md-checkbox ng-model="{{value.email}}"></md-checkbox>
</td>
</tr>
Not sure what I am doing wrong, but table shows up empty.
This should work, only problem I can see is, ng-model needs variable name, it does failed if you try to pass {{}}(interpolation) to it.
<tr ng-repeat="(user,value) in editRulesCtrl.userList">
<td>
{{user}}
</td>
<td>
<md-checkbox ng-model="value.sms"></md-checkbox>
</td>
<td>
<md-checkbox ng-model="value.email"></md-checkbox>
</td>
</tr>
Plunker
<tr ng-repeat="(user,value) in userList">
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>
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.
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