I have array with object's and I need to output this array in 2 column's. I tried to use filter, ng-switch-when. But always array output's in 1 col. There is my array:
Here is my last try outputting with ng-switch-when:
<div ng-repeat="date in allDates">
<div ng-switch="date.invited_date">
<table>
<thead>
</thead>
<tbody>
<tr>
<td ng-switch-when="1">{{date.project_name}}</td>
<td ng-switch-when="0">{{date.project_name}}</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
Actual result is:
But i need to separate them by invited_date in 2 column's how can I do it?
I can do it in 2 tables, but then if project name will be long it will ruin structure
You cant show in two rows with single iteration , try as two iteration
<div ng-repeat="date in allDates">
<div ng-switch="date.invited_date">
<table>
<thead>
</thead>
<tbody>
<tr>
<td ng-switch-when="1">{{date.project_name}}</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
<div ng-repeat="date in allDates">
<div ng-switch="date.invited_date">
<table>
<thead>
</thead>
<tbody>
<tr>
<td ng-switch-when="0">{{date.project_name}}</td>
</tr>
</tbody>
</table>
</div>
<div>
</div>
</div>
Related
I am using sock.js topic subscription for getting data. I can type response to console with this;
<div>
<SockJsClient url='http://localhost:8080/websocket-example' topics={['/topic/currency']}
onMessage={(msg) => {console.log(msg);}}
ref={(client) => {this.clientRef = client}}>
</SockJsClient>
</div>
But i couldn't render it.
Questions;
I am making topic subscription in the render function. Do I have to
do it on another function? If yes how can i achive that?
After the first question, i have to render it. Incoming messages;
{parity: "EURTRY", buy: 7.873162974672604, sell: 7.071410177380406}
{parity: "USDTRY", buy: 7.58763763316203, sell: 7.158500227651455}
I want to render it in a table. Using bootstrap for the table. Each message will be updated in the table by parity property. There can be a switch for it.
<div class="row">
<div class="col-md-12">
<table id="currencies" class= "table table-hover" >
<thead class="thead-dark">
<tr>
<th>Currency Pair</th>
<th>Buy</th>
<th>Sell</th>
</tr>
</thead>
<tbody>
<tr>
<td>USDTRY</td>
<td id="usdTryBuy"></td>
<td id="usdTrySell"></td>
</tr>
<tr>
<td>EURTRY</td>
<td id="eurTryBuy"></td>
<td id="eurTrySell"></td>
</tr>
<tr>
<td>GBPTRY</td>
<td id="gbpTryBuy"></td>
<td id="gbpTrySell"></td>
</tr>
<tr>
<td>EURUSD</td>
<td id="eurUsdBuy"></td>
<td id="eurUsdSell"></td>
</tr>
</tbody>
</table>
</div>
</div>
Thanks for your valuable thoughts.
iterate it using map function
array
let arr = [{parity: "EURTRY", buy: 7.873162974672604, sell: 7.071410177380406},
{parity: "USDTRY", buy: 7.58763763316203, sell: 7.158500227651455}]
JSX
<div class="row">
<div class="col-md-12">
<table id="currencies" class= "table table-hover" >
<thead class="thead-dark">
<tr>
<th>Currency Pair</th>
<th>Buy</th>
<th>Sell</th>
</tr>
</thead>
<tbody>
{arr.map((item,i)=>
<tr key={i}>
<td>USDTRY: {item.parity}</td>
<td id="usdTryBuy">{item.buy}</td>
<td id="usdTrySell">{item.sell}</td>
</tr>
)}
</tbody>
</div>
</div>
I am trying to sort columns by clicking on the header item using smart table. But it does not work for me. What am I doing wrong?
This is my HTML:
<div class="pane pane--table1" st-table="data.content" st-safe-src="data">
<div class="pane-hScroll">
<table>
<thead>
<tr>
<th ng-repeat="item in data.header" st-sort="{{item}}">{{item}}</th>
</tr>
</thead>
</table>
<div class="pane-vScroll">
<table>
<tbody>
<div ng-include="'templates/includes/ajax_spinner.html'"></div>
<tr ng-repeat="value in data.content">
<td ng-repeat="(key, val) in value[0]">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to fetch the data inside table but not getting any data.
Code is here--
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr>
<th><b>Project Name :</b></th>
<td ng-repeat="a in viewProjects">
{{a.id}}
</td>
{{viewProjects | json}}
</tr>
</tbody>
</table>
</div>
getting all data in viewProjects through json but unable to print it inside table row n each function of controller services and models working perfactly except this.
Please help me to get this issue.
You can use <ng-container ng-repeat=""></ng-container> for any angularJS condition without use any html element as below :
<table>
<tr>
<td>xyz</td>
<ng-container ng-repeat="a in myArray">
<td>{{a.id}}</td>
</ng-container>
</tr>
</table>
It looks like you should loop over tr instead of td in this case
<div ng-controller="tenders">
<table ng-init="getViewProjectDetail('<?php echo $project_id ; ?>')">
<thead>
<tr class="active">
<th colspan="4">
Project Detail:
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in viewProjects">
<td><b>Project Name :</b></td>
<td >
{{a.id}}
</td>
</tr>
</tbody>
</table>
</div>
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 two tables in my HTML. I want to take data from one list and pass it to another. I can't do the same ng-repeat call because on the second table I have one individual customer and I just want to display his ID. On the first table, I have all the customers.
<table border="1" id="userTable">
<tr>
<b>#</b>
</tr>
<tr ng-repeat="user in userList" ng-click="viewUserDiv()">
<td ng-model="id">{{user.id}}</td>
</tr>
</table>
<div ng-show="userDiv">
<table border="1">
<tr>
<b>#</b>
</tr>
<td ng-model="id">{{id}}</td>
</table>
</div>
<table border="1" id="userTable">
<tr>
<b>#</b>
</tr>
<tr ng-repeat="user in userList" ng-click="viewUserDiv(user)">
<td ng-model="id">{{user.id}}</td>
</tr>
</table>
$scope.viewUserDiv = function(user) {
if (user) {
$scope.userDiv = true;
$scope.userDivUser = user;
}
}
<div ng-show="userDiv">
<table border="1">
<tr>
<b>#</>
</tr>
<td ng-model="userDivUser">{{userDivUser.id}}</td>
</table>
<div>