<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>
Related
I am iterating *ngFor loop but when I click the next to the pagination then again index number starts from 0. Please provide the solution If anybody have any idea. I am using ngb-pagination.
<table class="table records-content-table " role="grid">
<thead>
<tr role="row">
<th>Name</th>
</tr>
</thead>
<tbody>
<ng-container
formArrayName="broadcastAppointment" *ngFor="let appointment of filteredAppointmentsList | slice: (page-1) * ngPageSize : (page-1) * ngPageSize + ngPageSize; let i=index; trackBy:trackByAppointmentId">
<tr class="table-tr-hover">
<td (click)="fetchAppointmentMessages(appointment, i, $event, 'row')"
(change)="countSelectedApptId(i, $event)" class="textEclipse" title="{{appointment.clientName}}">
<span class="multiselectAppointmentDiv ml-1 mr-1" *ngIf="allowApptToBroadcast">
<input id="selectAppt-{{i}}" name="name"
(click)="fetchAppointmentMessages( appointment, i, $event)"
class="broadcastChkBox apptListChkBox" type="checkbox" [formControlName]="i">
<label for="selectAppt-{{i}}" class=" control-label"></label>
</span>
</td>
</tr>
</ng-container>
</tbody>
</table>
I have a table of rows listing information about classifiers for a policy. The ng-repeat directive displays the rows 2 at a time per classifier, where the second row contains a subtable that is hidden unless the fi-chevron arrow for that row gets clicked. The first row contains basic info about the classifier. The second row contains additional information that only displays if requested. This information is in the form of a subtable listing of rules for that classifier.
For some reason, only when clicking the arrow on the first classifier does the table expand ABOVE the classifier info and not below. All other rows, it expands below as it should. This makes no sense because the HTML below forces the order to be where the classifier info row always is on top of the rules table row.
I am using datatables to display the table.
<table id="classifier-association-table" class="row-border hover info dataTable no-footer"
style="border-top: 2px solid #CCC;">
<thead>
<tr>
<th></th>
<th ng-click="sortAttachedSG('name')">
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_NAME' | translate }}</div>
<div ng-class="sgAttachedCondition ? 'sort-ascend' : 'sort-descend'" id="sortName"
class="sort-icon" style="display: block;" ng-show="sgAttachedNameSort">
<span class="fi-chevron"></span>
</div>
</th>
<th ng-click="sortAttachedSG('description')">
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_TYPE' | translate }}</div>
<div ng-class="sgAttachedCondition ? 'sort-ascend' : 'sort-descend'" id="sortDesc"
class="sort-icon" style="display: block;" ng-show="sgAttachedDescSort">
<span class="fi-chevron"></span>
</div>
</th>
</tr>
</thead>
<tbody ng-repeat="item in classifierData" data-ng-switch on="attachedRulesCollapse[$index]">
<tr ng-class="getSelectedClass(group)">
<td>
<input type="checkbox" ng-checked="isSelected(item)"
ng-click="checkclick($event,item)" >
<div class="rules-accordion-arrow"
ng-class="attachedRulesCollapse[$index] ? 'sort-ascend' : ''"
ng-click="showRulesForClassifier($index, item, true)" id="showRulesId">
<span class="fi-chevron"></span>
</div>
</td>
<td>
<div class="name-overflow">{{item.name}}</div>
</td>
<td>
<div class="name-overflow">{{item.type}}</div>
</td>
</tr>
<tr data-ng-switch-when="true">
<td colspan="3">
<div class="la-ball-clip-rotate icon-button" ng-show='rulesLoadingFlag'
style="height: 20px;margin-top: -7px; padding-left: 30rem">
<div style="width : 25px;height: 25px;" ng-show="true"></div>
</div>
<div class="table-conainer" id="rulesTable" ng-show="!rulesLoadingFlag">
<table id='rules-table' class="row-border hover info dataTable no-footer">
<thead>
<tr>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_IP_PROTOCOL' | translate }}</div>
<div class="sort-icon"><span class="fi-chevron"></span>
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_IP_PROTOCOL_NUMBER' | translate }}
</div>
<div class="sort-icon"><span class="fi-chevron"></span>
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div class="ng-binding">
{{ 'CLASSIFIER_RULES_SOURCE_IP' | translate }}
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{'CLASSIFIER_RULES_SOURCE_PORT' | translate}}
<span id="portRangeToolTipId"
class="fi-help port-range-tooltip"
tabindex="0"
tooltip-class="vtsTooltip"
tooltip="{{'SECURITY_GROUPS_RULES_TOOLTIP' |
translate}}"
tooltip-append-to-body="true"
tooltip-placement="top-right"
tooltip-trigger="mouseenter focus mouseleave blur">
</span>
</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_DESTINATION_IP' | translate }}</div>
</th>
<th>
<div class="table-vertical-line"></div>
<div>{{ 'CLASSIFIER_RULES_DESTINATION_PORT' | translate }}
<span id="portRangeToolTipId"
class="fi-help port-range-tooltip"
tabindex="0"
tooltip-class="vtsTooltip"
tooltip="{{'SECURITY_GROUPS_RULES_TOOLTIP' |
translate}}"
tooltip-append-to-body="true"
tooltip-placement="top-right"
tooltip-trigger="mouseenter focus mouseleave blur">
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in rules" ng-class="getSelectedClass(rule)">
<td>
<div class="name-overflow" data-x-rule-id={{item['rule-id']}}>
{{item.protocol}}
</div>
</td>
<td class="name-overflow">{{item.protcolnumber}}</td>
<td ng-bind="item['source-ip']" class="name-overflow"></td>
<td class="name-overflow">
<span>{{ item['source-port-range'] }}</span>
</td>
<td ng-bind="item['destination-ip']" class="name-overflow"></td>
<td class="name-overflow">
<span>{{ item['destination-port-range'] }}</span>
</td>
</tr>
<tr ng-show="!rules.length && isEditMode">
<td class="dataTables_empty" colspan="8">
{{'NO_DATA_AVAILABLE_IN_TABLE' | translate}}
</td>
</tr>
<tr ng-show="!isEditMode">
<td class="dataTables_empty" colspan="8">
{{'CLASSIFIER_CREATE_RULES_DISABLED' | translate}}
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I suspect this may be an angular issue, but I'm not sure. If you would like more code let me know.
Anyone have any idea why this is happening?
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.
Warning: some words are in french in my code on pictures so I will explain what is about here
This is table I am trying to change the color depending on the true of false value
It is a simple disponibility schedule for each employees for the periods of AM,PM and Noon of a Day.
At this moment all I am trying to do is to displayed the values of, if someone is available at that period of this day,the the will turn turn green. In my database, each period displayed here are in bit values.
I will use the combo-box to switch employees(right now it display their ID but it only temporary )
The problem is, I can't get to display them properly, the values are incorrect ! So I am gonna post a paste bin of my code for this part right here.
<!-- The view code-->
<div class="row">
<div class="col-lg-10">
<div class="panel panel-default" style="margin-top:10px;">
<div class="panel-heading">
<b>Horraires des disponibilités </b>
</div>
<div class="panel-body">
<div class="col-lg-5">
<div >
<label> Employer </label>
<select ng-model="emp.EmployerID" ng-change="SelectedEmployer(emp.EmployerID)" class="form-control">
<option ng-repeat="emp in LesDisponibilites" >{{emp.EmployerID}}</option>
</select>
</div>
</div><div class="col-lg-6"><div class="dataTables_filter"><label><b>Search:</b><input type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example"></label></div></div>
<!-- /.panel-heading -->
<div class="col-lg-10 ">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead >
<tr>
<th>Jour</th>
<th>AM</th>
<th>PM</th>
<th>Soir</th>
</tr>
</thead>
<tbody >
<tr >
<td>Lundi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Mardi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Mercredi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Jeudi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Vendredi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_Soir)" style="background-color:{{DispoColor}};"></td>
</tr>
<tr>
<td>Samedi</td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_AM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_PM)" style="background-color:{{DispoColor}};"></td>
<td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_Soir)" style="background-color:{{DispoColor}};"></td >
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
// Controller code
myappCtrl.controller('DisponibiliteCtrl', ['$scope', '$http', function ($scope, $http) {
var url = "http://localhost:64124/api/disponibilites"
$scope.DispoColor = "none";
$scope.LesDisponibilites = {};
$scope.Lindex = {};
// Récupère le date
$http.get(url).then(function (result) {
$scope.LesDisponibilites = result.data;
})
$scope.SelectedEmployer = function (index) {
console.log(index);
$scope.Lindex = index -1;
}
// Pour ajouter les couleurs qui indiques les disponibilités
$scope.IsDispo = function (Dispo ) {
if (Dispo == true) {
$scope.DispoColor = "#0ac20a";
}
else {
$scope.DispoColor = "none";
}
}
Also this is weird, but when I switch to ng-model instead of ng-required, It seems to show the correct data, but the console is going crazy with error, as ng-model should not be use for a Function.
I tried a lot of things and I am lost right now. I hope somebody here can help me.
You can use ng-style or ng-class to doing that.
ng-style="expression" or ng-class="expression"
In your case, as an example you can apply following way for your rows.
<td ng-style="LesDisponibilites[Lindex].Lundi_AM ? {'background-color':'#0ac20a'}:'none' ></td>
Try use ng-class property.
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th class="col-xs-4">COLUMN1</th>
<th class="col-xs-1">COLUMN2</th>
<th class="col-xs-1">COLUMN3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in anyObject" ng-class="{'info': obj.value1}">
<td class="col-xs-2">{{obj.value1}}</td>
<td class="col-xs-1">{{obj.value2}}</td>
<td class="col-xs-1">{{obj.value3}}</td>
</tr>
</tbody>
</table>
</div>
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