I would like to ask you a question.
My wish is to create a table composed by 4 columns and show on table-data (3rd and 4th column of each row) an image of green circle when a variable (blocco1 or blocco2) is true and an image of red circle when the same variable is false.
This is my code
<tr ng-repeat="data in elencoTransazioni">
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.code}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.desc}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">
<img ng-if="data.blocco1=='true'" src="/i9web/mock/circleGreen.png">
<img ng-if="data.blocco1=='false'" src="/i9web/mock/circleRed.png">
</td>
<td class="i9fontPre text-center" header-class="'i9header'">
<img ng-if="data.blocco2=='true'" src="/i9web/mock/circleGreen.png">
<img ng-if="data.blocco2=='false'" src="/i9web/mock/circleRed.png">
</td>
</tr>
Can anyone could help me?
Thank you in advance
Try use ng-src.
<tr ng-repeat="data in elencoTransazioni">
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.code}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">{{::data.desc}}</td>
<td class="i9fontPre text-center" header-class="'i9header'">
<img ng-src="{{data.blocco2 ? '/i9web/mock/circleGreen.png'
:'/i9web/mock/circleRed.png'}}">
</td>
</tr>
Related
On most of our angular pages we got this annoying error and we cant seem to find a solution.
GET http://localhost:8080/img/flagNations/%7B%7B%20bookings.language%20%7D%7D.png 404 (Not Found)
The code is ok, and the error only appears when there is no data in ng-repeat.
vm.checkinTodayShowAll = false;
if (res.checkinToday.length) {
vm.checkinTodayShowAll = true;
vm.checkinToday = res.checkinToday;
}
and on the page I even hide it if there is no data...
<table class="start-table start-checkin-table" ng-show="vm.checkinTodayShowAll">
But still it wants to render that image
<tr ng-repeat="bookings in vm.checkinToday" class="start-text">
<td class="start-left start-border overflow">
<img src="./img/flagNations/{{ bookings.language }}.png" class="start-flag">
</td>
</tr>
How do we prevent it from trying to render the image when there is nothing to ng-repeat?
Use ng-if instead of ng-show:
<table class="start-table start-checkin-table" ng-if="vm.checkinTodayShowAll.length>0">
instead of:
<table class="start-table start-checkin-table" ng-show="vm.checkinTodayShowAll">
ng-show: Just hides the view It is still in DOM . ng-if: Remove
element from DOM
Use ng-if instead of ng-show
<table class="start-table start-checkin-table" ng-if="vm.checkinTodayShowAll.length > 0">
<tr ng-repeat="bookings in vm.checkinToday" class="start-text">
<td class="start-left start-border overflow">
<img src="./img/flagNations/{{ bookings.language }}.png" class="start-flag">
</td>
</tr>
Use ng-if
<tr ng-repeat="bookings in vm.checkinToday" class="start-text">
<td class="start-left start-border overflow">
<img src="./img/flagNations/{{ bookings.language }}.png" ng-if="vm.checkinToday.length > 0" class="start-flag">
</td>
</tr>
//Try this one and it will boost performance also
<table class="start-table start-checkin-table" ng-if="vm.checkinTodayShowAll.length">
<tr ng-repeat="bookings in vm.checkinToday track by $index" class="start-text">
<td class="start-left start-border overflow">
<img src="./img/flagNations/{{ bookings.language }}.png" class="starflag">
</td>
I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.
I have an ng-table in AngularJS.
<table ng-table="fondiTable" class="table table-condensed table-bordered table-striped" show-filter="isFiltersVisible">
<tr ng-repeat="fondo in data | filter:getChiave | filter:getRapporto">
<td class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-th-list"></i></a>
<ul class="dropdown-menu">
<li><a><i class="glyphicon glyphicon-search"></i> Visualizza</a></li>
<li><a><i class="glyphicon glyphicon-pencil"></i> Modifica</a></li>
<li class="disabled"><a><i class="glyphicon glyphicon-trash"></i> Cancella</a></li>
</ul>
</td>
<td class="i9font text-center" data-title="'Data Rif'" header-class="'i9header'" filter="{dataRif: 'text'}" sortable="'dataRif'">{{fondo.dataRif}}</td>
<td class="i9fontPre text-center" data-title="'Chiave IB'" header-class="'i9header'" filter="{chiave: 'text'}" sortable="'chiave'">{{fondo.chiave}}</td>
<td class="i9font text-center" data-title="'Stato Pratica'" header-class="'i9header'" filter="{stato: 'text'}" sortable="'stato'">{{fondo.stato}}</td>
<td class="i9font text-center" data-title="'Flag S/V'" header-class="'i9header'" filter="{fvs: 'text'}" sortable="'fvs'">{{fondo.fvs}}</td>
<td class="i9font text-right" data-title="'Fondo bucket 1 (EUR)'" header-class="'i9header'" filter="{fnd1: 'text'}" sortable="'fnd1'">{{fondo.fnd1}}</td>
<td class="i9font text-right" data-title="'Fondo bucket 2 (EUR)'" header-class="'i9header'" filter="{fnd2: 'text'}" sortable="'fnd2'">{{fondo.fnd2}}</td>
<td class="i9font text-center" data-title="'Bucket DH'" header-class="'i9header'" filter="{bktDH: 'text'}" >{{fondo.bktDH}}</td>
<td class="i9font text-center" data-title="'Fondo DH bucket 1'" header-class="'i9header'" filter="{fnd1DH: 'text'}" >{{fondo.fnd1DH}}</td>
<td class="i9font text-center" data-title="'Fondo DH bucket 2'" header-class="'i9header'" filter="{fnd2DH: 'text'}" >{{fondo.fnd2DH}}</td>
<td class="i9font text-center" data-title="'Rapporto'" header-class="'i9header'" filter="{rapporto: 'text'}" sortable="'rapporto'">{{fondo.rapporto}}</td>
<td class="i9font text-center" data-title="'Cdg'" header-class="'i9header'" filter="{cdg: 'text'}" sortable="'cdg'">{{fondo.cdg}}</td>
<td class="i9font text-center" data-title="'Matricola ins'" header-class="'i9header'" filter="{insMatr: 'text'}" sortable="'insMatr'">{{fondo.insMatr}}</td>
</tr>
</table>
I would like to select only one row from that table with a simple click on it and show data of that row, not only the ones that I show in the table, but also others referred to my selected row. In a few words, I need a click on one row to show details of that selection.
How can I do it?
You can bind ng-click to table row like,
<tr ng-repeat="fondo in data | filter:getChiave | filter:getRapporto" ng-click="processData(fondo)">
</tr>
So on click of each row you will get the corresponding data in controller.
.controller('myCntrl',function($scope){
$scope.processData=function(data){
console.log(data)
}
});
Im wondering why an animation will not work on the <tr> element in this case (plnkr):
<tr data-ng-repeat-end data-ng-show="employee.show" class="animate-show">
<td colspan="5">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
But will work on the <td> element when written like this (plnkr):
<tr data-ng-repeat-end ng-animate-children>
<td colspan="5" data-ng-show="isToggled[$index]" class="animate-show">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
Why is this happening, and what can be done to achive animation on the <tr> with data-ng-repeat-end attribute?
When I generate an EXT.Button, there resulting HTML looks like this:
<table id="ext-comp-1015" cellspacing="0" class="x-btn x-btn-text-icon right-toolbar-top-link x-btn-icon">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<td class="x-btn-tl"><i> </i></td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-ml"><i> </i></td>
<td class="x-btn-mc">
<em class="" unselectable="on">
<button type="button" id="ext-gen93" class=" x-btn-text"> </button>
</em>
</td>
<td class="x-btn-mr"><i> </i></td>
</tr>
<tr>
<td class="x-btn-bl"><i> </i></td>
<td class="x-btn-bc"></td>
<td class="x-btn-br"><i> </i></td>
</tr>
</tbody>
</table>
How can I create and pass a template into the button to have it output simply a "button" tag? I am using EXT.js 3.2.1
Thanks,
Jamie
You can get around it by using an Ext.Panel..
new Ext.Panel({
renderTo: 'id-of-element',
html: '<button onclick="alert(\'I was clicked\');">Click Me</button>',
border: false
});