I have an array with X elements. I am looping over the array, and when I get to the last element in the array, I want to output an additional column
<tr data-bind="foreach: columns">
<th>{{ label }}</th>
<!-- ko if: ($parent.columns.length - 1) == $index -->
<th>foo</th>
<!-- /ko -->
</tr>
It is not rendering the final column.
when you want to compute any observable variable in view by javascript you need to use parentheses.
View :
<table>
<thead >
<tr data-bind="foreach: columns">
<th data-bind="text:label"></th>
<th data-bind="if:$index() == $parent.columns().length-1">Hello</th>
</tr>
</thead>
</table>
Example : http://jsfiddle.net/GSvnh/5111/
Related
I am trying to fetch data from mysql using php and trying to pass the data in json format to angularjs so that I can display data in table.
HTML code is:
<body ng-app="myModule">
<div class="row">
<div class="col-lg-12 text-center">
<div ng-controller="myController">
<table class="table">
<thead>
<tr>
<th>email</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.row -->
</div>
AngularJS code is:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope,$http) {
$http.post('http://enrolin.in/test/login.php')
.then(function(response){
$scope.employees=response.data;
}); });
Working php link that outputs json is : http://enrolin.in/test/login.php
Working link of table is http://enrolin.in/test/
But when I try to load the html. It does not load any data from the database.
I tried to view it in console, looks like ng-repeat is repeated 6 times that is exactly the number of rows in database that means data is imported but is not being displayed somehow
It is just a silly mistake in your view (can't believe I overlooked it at first).
You are just repeating empty rows now:
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
Those tds obviously need to be inside the repeated row:
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tr>
</tbody>
The problem seems to be in your HTML.
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
The <td> are outside the <tr>, so {{ employee }} does not exist in the <td>.
This should work :
<tr ng-repeat="employee in employees">
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tr>
I'm trying to display the string "No data was found." inside a table row whenever the data array is empty, but it seems the message get always printed no matter what.
Reproduction online (ignoring the condition orders.length ==0)
What am I doing wrong?
<table>
<thead>
<tr>
<th>Truck</th>
<th>Pickup</th>
</tr>
</thead>
<!-- ko if: orders.length==2 -->
<tbody>
<tr colspan="2">No data was found.</tr>
</tbody>
<!-- /ko -->
<tbody data-bind="foreach: orders">
<tr>
<td data-bind="text: truck"></td>
<td></td>
</tr>
</tbody>
</table>
If your orders is an ko.observableArray you need to write orders() to get the underlying array and get the length from there:
<!-- ko if: orders().length== 0 -->
Your HTML also invalid, the td elements are missing from:
<!-- ko if: orders().length==0 -->
<tbody data-bind="if: orders().length==0">
<tr colspan="2"><td>No data was found.</td></tr>
</tbody>
<!-- /ko -->
Demo JSFiddle.
This question already has answers here:
How to get the index of an parent scope array/ng-repeat inside child ng-repeat
(3 answers)
Closed 8 years ago.
I am trying to limit a sub repeat by the index of its parent repeat. So whaever level index it on it will be limited to that (+ 1 so we dont start at 0). Here is my thinking -
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
So the tr inside the table would be limited to the initial repeat of face, buy faces $index + 1. This is not working. Any insight would be much appreciated. Thanks!
You can use ng-init to save a reference to the upper $index
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid" ng-init="$faceIndex = $index">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of face.$index use $parent.$index because you want to refer parent ng-repeat $index.
Because ng-repeat creates an isolated scope from its current running scope.
CODE
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this would be helpful to you.
I'm stuck in getting parent ng-repeat value using child ng-repeat slug. It shows nothing just blank td's
What I've done
$scope.column = [column_id: "12"slug: "item6"sort: "0"status: "1"title: "Contact no"ts_datetime: "2014-12-12 12:27:50"];
$scope.column.item = [item1: "1"item2: "2"item3: "3"item4: "4"item5: "5"item6: "8"item_id: "1"status: "1"]
<table class="table table-bordered table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" >{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in listings">
<td ng-repeat="column in columns" ng-init="val = item.column.slug">{{ val }}</td>
</tr>
</tbody>
</table>
What I want is this. to get the value of item with the slug of column. Like item.column.slug
It looks like you want to use:
<td ng-repeat="column in columns">{{item[column].slug}}</td>
I'm trying to implement FooTable-2 in my project, but for some reason I can't get the pagination working.
I'm following THIS tutorial and here is what I have so far as a table code:
<div id="mainContent">
<div id="allTrackersDiv" style="display: none;">
<label><b>Active Trackers</b></label>
<table class="activeTrackersTable" id="allTrackersTable"
data-page-navigation=".pagination">
<thead>
<tr>
<th> ID </th>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
</tr>
</thead>
<tbody data-bind="foreach: trackersObjArray">
<tr data-bind="click: test">
<td><span data-bind="text: tId"></span></td>
<td><span data-bind="text: tname"></span></td>
<td><span data-bind="text: pname"></span></td>
<td><span data-bind="text: tcreate"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pagination"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The problem is that the paging is not working. I have 22 records in my table and it is supposed to start paging after the 10th record
Here is how it looks:
What am I missing here? At my point of view everything looks pretty fine. What am I missing, I really can't understand my mistake.
You can try mentioning
data-page-size="10"
explicitly.
And if that doesn't work, may be issue is due to dynamic data being added to footable.
Use
$('#myTable').append(html).trigger('footable_redraw');
So that footable will be redrawed and size limit will be applied.
Reference links: Footable data page size not respected and
Other issues due to dynamic data in footable