Why ng-repeat is not working with table? - javascript

ng-repeat not working with table,in the output only header part displayed? As i think the binding i did is perfectly fine, but something is there which i am missing?
When i try to run in Stackoverflow ide it is working fine.
I am using ADOBE Brackets.whether its the error in brackets??
Please suggest the best IDE for angularjs ?
Can anyone help me out where i am doing wrong?
var myApp=angular.module("myApp",[]);
var mycontroller=function($scope)
{
var employees=[
{Name:'Sahil',dateOfBirth:new Date(),gender:"Male",salary: 400000},
{Name:'Shaloni',dateOfBirth:new Date(),gender:"Female",salary: 100000},
{Name:'Nitish',dateOfBirth:new Date(),gender:"Male",salary: 300000},
{Name:'Diksha',dateOfBirth:new Date(),gender:"Female",salary: 600000},
{Name:'Tarun',dateOfBirth:new Date(),gender:"Male",salary: 900000}
]
$scope.emp=employees;
};
myApp.controller('myController',mycontroller);
<HTML ng-app="myApp">
<Head>
<title></title>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="day4.js"></script>
<link href="Style.css" rel="stylesheet"/>
</Head>
<body>
<div ng-controller="myController">
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
<th>Salary in Dollors</th>
</thead>
<tbody>
<tr ng-repeat="employee in emp">
<td>{{employee.Name}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>

Please find your solution , https://plnkr.co/edit/hFIfPlTcP8VLVE72coth
And problem in your code is here :
var mycontroller=function($scope)
and myApp.controller('myController',mycontroller);
mycontroller variable is not getting called. put Alert(); in that block and see.
And for editor you can use SUBLIME editor , Visual studio code, : Intellisense for angular2
var myApp=angular.module("myApp",[]);
var mycontroller=function($scope)
{
var employees=[
{Name:'Sahil',dateOfBirth:new Date(),gender:"Male",salary: 400000},
{Name:'Shaloni',dateOfBirth:new Date(),gender:"Female",salary: 100000},
{Name:'Nitish',dateOfBirth:new Date(),gender:"Male",salary: 300000},
{Name:'Diksha',dateOfBirth:new Date(),gender:"Female",salary: 600000},
{Name:'Tarun',dateOfBirth:new Date(),gender:"Male",salary: 900000}
]
$scope.emp=employees;
};
myApp.controller('myController',mycontroller);
<HTML ng-app="myApp">
<Head>
<title></title>
<script src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="day4.js"></script>
<link href="Style.css" rel="stylesheet"/>
</Head>
<body>
<div ng-controller="myController">
<table>
<thead>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
<th>Salary in Dollors</th>
</thead>
<tbody>
<tr ng-repeat="employee in emp">
<td>{{employee.Name}}</td>
<td>{{employee.dateOfBirth}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</HTML>

Related

sort for dataTable

I am trying to sort in datatable but, i couldn't understand how to do it. let me show what i tired to do with my code.
$(document).ready(function() {
$('#table').DataTable();
} );
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" type="text/css" media="all" />
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
#if($trades)
#foreach($trades as $trade)
<tbody>
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
</tbody>
#endforeach
#endif
</table>
I worked hard but unable to find what i have not done.
I think you need to move your #foreach to be inside of your <tbody> like this:
<tbody>
#foreach($trades as $trade)
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
#endforeach
</tbody>
To get the sorting to work, you'll have to add an option to your javascript like this:
$(document).ready(function() {
$('#table').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Which will order your table by the 4th column (since the 3 in the above example starts counting indexes at 0) in descending order. Reference - https://datatables.net/examples/basic_init/table_sorting.html

AngularJS automatic isn't working

I am writing a client-side application with AngularJS for fun. In a part of the application it's supposed to show all the applicants in a table, automatically fetched from my JSON array. But it isn't working.
This is my code:
//engine.js
(function(){
angular
.module("resumeBase", []);
})();
//controllers.js
(function(){
angular
.module("resumeBase")
.controller("tabularList", listController);
function listController() {
var vm = this;
vm.data = applicants;
}
var applicants = [
{
firstname: "Nima",
lastname: "Bavari",
evaluation: 5,
category: "IT & Computers",
fileLocation: "",
empConfirmed: "found",
confirmTime: "01-01-2017",
employer: "EnDATA",
payConfirmed: "yes"
}
]
})();
<!DOCTYPE html>
<html ng-app="resumeBase">
<head>
<title>::Search Entries::</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
</head><body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script type="text/javascript" src="scripts/engine.js"></script>
<script type="text/javascript" src="scripts/controllers.js"></script>
<div id="container" ng-controller="tabularList">
<hr />
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Evaluation</th>
<th>Category</th>
<th>Resume</th>
<th>Found Job?</th>
<th>Date and Time</th>
<th>Employer</th>
<th>Paid Us?</th>
</tr>
<tr ng-repeat="item in tabularList.data">
<td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
<td>{{item.evaluation}}</td>
<td>{{item.category}}</td>
<td><a ng-href="{{item.fileLocation}}" target="blank">{{item.fileLocation}}</a></td>
<td>{{item.empConfirmed}}</td>
<td>{{item.confirmTime}}</td>
<td>{{item.employer}}</td>
<td>{{item.payConfirmed}}</td>
</tr>
</table>
[Add New Entry]
</div>
</body>
</html>
What do you recommend? Where is my mistake?
You are missing the controller as syntax, Just change your HTML as,
<div id="container" ng-controller="tabularList as vm">
also,
<tr ng-repeat="item in vm.data">
DEMO
//engine.js
(function(){
angular
.module("resumeBase", []);
})();
//controllers.js
(function(){
angular
.module("resumeBase")
.controller("tabularList", listController);
function listController() {
var vm = this;
vm.data = applicants;
}
var applicants = [
{
firstname: "Nima",
lastname: "Bavari",
evaluation: 5,
category: "IT & Computers",
fileLocation: "",
empConfirmed: "found",
confirmTime: "01-01-2017",
employer: "EnDATA",
payConfirmed: "yes"
}
]
})();
<!DOCTYPE html>
<html ng-app="resumeBase">
<head>
<title>::Search Entries::</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
</head><body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div id="container" ng-controller="tabularList as vm">
<hr />
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Evaluation</th>
<th>Category</th>
<th>Resume</th>
<th>Found Job?</th>
<th>Date and Time</th>
<th>Employer</th>
<th>Paid Us?</th>
</tr>
<tr ng-repeat="item in vm.data">
<td>{{item.firstname}}</td>
<td>{{item.lastname}}</td>
<td>{{item.evaluation}}</td>
<td>{{item.category}}</td>
<td><a ng-href="{{item.fileLocation}}" target="blank">{{item.fileLocation}}</a></td>
<td>{{item.empConfirmed}}</td>
<td>{{item.confirmTime}}</td>
<td>{{item.employer}}</td>
<td>{{item.payConfirmed}}</td>
</tr>
</table>
[Add New Entry]
</div>
</body>
</html>

Fill HTML table from JSON object using angular.js

I am trying to get data from json object and using ng-repeat show that data inside of a HTML table.
I am getting data with $http and later using ng-repeat for writing the rows of table.
This is my json object:
{
"tests": [
{
"date": "08/02/1999",
"name": "Test 1",
"test": "Raven"
},
{
"date": "11/09/1998",
"name": "Test 2",
"test": "PCT+"
},
{
"date": "13/01/2005",
"name": "Test 3",
"test": "PCT"
}
]
}
This is how I am trying to get json into angular variable:
var testApp = angular.module('testApp', []);
testApp.controller('TestListCtrl', function ($scope, $http) {
$http.get('GlobalData.json').success(function (data) {
$scope.tests = data;
});
});
And this is my HTML for table:
<script src="batteriesScript.js"></script>
<script src="../scripts/angular.min.js"></script>
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody ng:repeat="t in tests">
<tr>
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
This is the index page where I have calls to different views depending on which link is clicked. Table content is in first view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Demo">
<head>
<title>BatteryApp</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<link href="assets/style.css" rel="stylesheet" />
<script src="scripts/routes.js"></script>
</head>
<body>
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
Battery Application
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Add new battery
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Battery</b>
</td>
</tr>
</table>
</body>
</html>
Data is not shown on the page and I do not get any exception in browser console.
Second problem I have is that I do not see all files and folders from my solution in Chrome console:
I am missing Batteries folder where is the code I am using for my table and accessing to data.
So practically I am unable to debug it and try to find some errors.
Does anybody have idea how can I solve Chrome problem and does anybody spots potential errors in code for generating HTML table using angular.js?
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="t in tests">
<td>{{t.date}}</td>
<td>{{t.name}}</td>
<td>{{t.test}}</td>
</tr>
</tbody>
</table>
Change the location of the ng-repeat. The row should be repeating, not the table body, right?
As far as the missing folder is concerned, see if you have included the batter.js file in your index.html. Or share your index.html code
It looks like it should be Batteries/batteriesScript.js in the script tag

Jquery tablesorter not working

I am new to Jquery and web-programming in general. I am trying to use the tablesorter jquery plugin, for one of my programs only to find that it is not working. After some tweaking, I was unable to make it work. So resorted to Stack Overflow.
Can you please explain what my mistake is? Thanks in advance :)
Now, my html file(following code) is in the same folder as my "jquery.tablesorter.js" is in. I'm trying to use google Jquery CDN from the W3 schools quoted below :
http://www.w3schools.com/jquery/jquery_install.asp
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
</script>
</head>
<body>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
for filename in os.listdir (input_dir) :
f = open(file_name, 'rb')
file_content = f.readlines()
f.close()
len_file = len(file_content)
while( i < len_file ):
line = file_content[i].split(delimiter)
i +=1
Update1: I'm able to fix this error. Seems adding Content Distribution from Google caused the error changing it to a internal directory seems to solve the problem.
Actually, I changed,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
to this line.
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
and it worked :)
Any ideas why Google CDN didn't work ? Thanks! :)
Update2:
When you test the code locally, try to add http: before the google CDN call.ie,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Enjoy the plugin:)
I bet it is working, you're just not seeing any table styling because the tablesorter.css file isn't loaded. Try clicking on the table head and see if it sorts.
You can try - It works for me..
$(document).ready(function()
{
$("#myTable").tablesorter({sortList:[[0,0],[2,1]], widgets:'zebra']});
}
);

Firefox won't show and hide my table properly. Only Shows header on button press not row

Firefox won't show and hide my table properly. Only Shows header on button press not row.
Basically what I'm wanting is for when the user clicks the button, the column header with the id "HideMe" and the rows of the same id are shown. This works perfectly in Chrome but not in Firefox
<html>
<head>
<title>Show and Hide Javascript won't work in Firefox</title>
<style>
#HideMe {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.ShowPassword').click(function () {
$(HideMe).show();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>ID Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th id="HideMe">Password</th>
</tr>
<tr>
<td>2121</td>
<td>Mike</td>
<td>Daniel</td>
<td id="HideMe">Password</td>
</tr>
<button class="ShowPassword">Show Password</button>
</body>
This is in no way right
$(HideMe).show();
you may want to do something like:
$('#HideMe').show();
FIDDLE: http://jsfiddle.net/JS7tK/5/
I didn't notice at first but as bandi notes in his comment id should be unique.
So try to do something like:
<html>
<head>
<title>Show and Hide Javascript won't work in Firefox</title>
<style>
.HideMe {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.ShowPassword').click(function () {
$('.HideMe').show();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>ID Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th class="HideMe">Password</th>
</tr>
<tr>
<td>2121</td>
<td>Mike</td>
<td>Daniel</td>
<td class="HideMe">Password</td>
</tr>
<button class="ShowPassword">Show Password</button>
</body>
<html>
I don't do jQuery, but as a rule you will undoubtedly be better off putting a span inside the & hiding it rather than trying to hide the cell, because doing that would unbalance the table so no great surprise that some browsers do not allow it.

Categories