Premise:
I'm playing around with knockout and have been trying to display a populated array variable through and html table.
Problem:
The problem is that I don't know how to display the "last_name" property in the variable array shown below.
JSON FILE + HTML FILE:
//JSON FILE
$(function()
{
console.log('Ready');
ko.applyBindings(new myvm());
}
function myvm()
{
var self = this;
//cust contains the data mentioned at the bottom
self.customers = cust;
}
//HTML FILE
<table class= "table" id="kocustomertable" border= "1">
<tr>
<th>Last name</th>
</tr>
<tbody data-bind = 'customers'>
<tr>
<td data-bind = 'text: last_name'></td>
</tr>
</tbody>
</table>
SAMPLE CONTENT OF DATA INSIDE VARIABLE "CUST"
[
{"id":1,"first_name":"Tracey","last_name":"Jansson","email":"tjansson0#discuz.net","gender":"Female","ip_address":"167.88.183.95","birthdate":"1999-08-25T17:24:23Z","website":"http://hello.com","city":"Medellín","credits":7471}
]
It looks like the data-bind on your <tbody> is missing a binding.
Your have referenced the your view model customers property in your HTML but you haven't told knockout how to bind it to the view. If you add a foreach binding, you should see that you get a table row per customer. For example, you could replace your opening <tbody> with:
<tbody data-bind='foreach: customers'>
Hope this helps. Take a look at the knockout documentation on foreach for more info.
Related
I'm trying to loop through an array in order to print some column headers dynamically. I see that the array values are inserted into the HTML code, but I'm unable to sort my table whenever I click on one of the column headers.
Strange thing is: when I replace the {{ colHeader }} variable with plaintext html the tablesorter is functioning normally. So does anyone know what I'm doing wrong, and how to fix it?
<script type="text/javascript">
$scope.colHeaders = {
'id' ,
'name' ,
'symbol',
};
$scope.sortType = 'id'; // specifies column to sort
</script>
<table class="table">
<thead>
<tr>
<th ng-repeat="colHeader in colHeaders">
<a href="#" ng-click="sortType = '{{ colHeader }}'">
column header
</a>
</th>
</tr>
</thead>
</table>
Using inline functions in html templates is a bad idea.
Try using a function from your controller like this: <th ng-repeat="colHeader in colHeaders" ng-click="sortBy(colHeader)">
Here is a working plunker: https://plnkr.co/edit/NTgjVpKoKhrjyP1YuN2n
From the the controller I am passing a json encoded object to my view. In the view i have used bootstrap table to display the data. However in the table it show No matching records found. Please help.
here is my controller
enter image description here
here is my view
enter image description here
I guess your model is roommaster. To get Eloquent model to json use
$roommaster->toJson()
because json_encode($roommaster) needs $roommaster to be an array and in your case is an object
Have you checked the source code of the page the table is on to see if the code is outputting JSON to data-url?
If it is, I think the issue isn't with the PHP code but the table itself. Try adding this to the blade template and getting rid of data-url from your table.
Code for table:
<table class="table table-hover" data-click-to-select="true">
<thead>
<tr>
<th data-field="id" data-checkbox="true">ID</th>
<th data-field="roomname">Room name</th>
<th data-field="Desc">Description</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
Code to populate table with data:
<script>
var $table = $('.table.table-hover');
$(function () {
var data = {!! $roomname !!};
$table.bootstrapTable({data: data});
});
</script>
I have stored a value in a scope on controller.js.How to get that scope value in html file.
Controller.js
myAppCont.controller('Listvalue',['$scope','$rootScope','$http',
function($scope,$rootScope,$http){
city=$scope.val;
}]);
HTML
<div class="col-md-10" ng-controller="Listvalue">
<table class="table table-bordered table-style" id="statusTable">
<thead>
<tr>
<th>values</th>
</tr>
</thead>
<tbody class="align-center">
<tr>
<td>{{city}}</td>
</tr>
</tbody>
</table>
</div>
You need to have the $scope variable inside the controller, Do it other way
myAppCont.controller('Listvalue',['$scope','$rootScope','$http',
function($scope,$rootScope,$http){
$scope.city=val;
}]);
Then it will be evaluated and shown in the view
<td>{{city}}</td>
Working Sample
Angular have 2 way data binding principle. The data you bind with the model is get reflected in the view.
The models in a respective controllers are accessed with $scope.
Whatever data you want to bind to the view should be through the $scope.
In this case, if you have, already stored data in $scope.val,
Bind that to your view,
<td>{{val}}</td>
This should work!
I'm trying to extract a raw HTML table of data from a table which I currently generate on a web page using AngularJS.
To give a simple example:
Angular code:
<table>
<tr ng-repeat="customer in customers">
<td>{{customer.firstname}}</td>
<td>{{customer.lastname}}</td>
</tr>
</table>
I don't want to code two different solutions and so would like to use AngularJS.
Is it possible to extract the raw html code using AngularJS? i.e. the following :
<table>
<tr>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>Fred</td>
<td>Bloggs</td>
</tr>
...etc
</table>
you can use
var element = angular.element(element)
element[0] //show give raw dom element
refer jqlite and below link in angularJS , probably will get idea https://docs.angularjs.org/api/ng/function/angular.element
Fiddle: https://jsfiddle.net/shushanthp/Lho8myw2/
I have a filterable table containing a collapsible list in a column. The collapsible contains another table. Sample of the situation.
The problem is that when anything is written to filter only the required items, the inner table also gets filtered. Is there a way to avoid this.
Suggestions about how else to display something like this are also welcome.
If you want to filter only from the Name column, you can try to use below code:
$('#filter').keyup(function () {
var stringValue = $(this).val();
$("#outer-table tr.row").each( function( index ) {
$(this).hide();
$(this).find(".panel-title a:contains("+stringValue+")").parents("tr").show();
});
});
EDIT: I have tested the new code above, it works as expected.
HTML changes, easier to get ONLY every <tr> that are part of your outer-table:
Change your outer-table tag from <tbody class="searchable">, into this, <tbody id="outer-table" class="searchable">
Then add a selector to every <tr> inside outer-table but NOT inside inner-table, like this:
</tr>
<tr class="row">
<td><div id="collapsibleMain2" class="panel-group">
</tr>
<!-- and so on -->
For more info about the jQuery functions that I used above:
contains
each
hide