Filling table in angular js using ng-repeat - javascript

I am able to fill the contents row-by-row. However, I was wondering how would we fill a table with two columns. I want it to be filled columnwise without repeating contents. Basically, it should return a table with two rows and two columns.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
​
<body ng-app="myApp" ng-controller="myCtrl">
​
<h1 ng-repeat="x in records">
​
<table align=center>
<tr>
<td>{{x}}</td>
<td>{{x}}</td>
</tr>
</table>
</h1>
​
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
​
</body>
</html>
​

In AngularJS the data are manipulated mostly in JSON and collected as Array data structure.
Get your data from API or service call and convert the data into appropiate array of objects, then the data can be easily assigned to the table column and the record values are assigned to each row of the table using the "ng-repeat" in AngularJS.
In the below code you can see the "ng-repeat" and "x in records" is used as the loop for iterating through records of data values and assign to table.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
​
<body ng-app="myApp" ng-controller="myCtrl">
​
<h1 ng-repeat="x in records">
​
<table align=center>
<tr>
<td>{{x.name}}</td>
</tr>
<tr>
<td>{{x.location}}</td>
</tr>
</table>
</h1>
​
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{"name":"Alfreds Futterkiste", "location":"avenue1"},
{"Berglunds snabbköp", "location":"avenue2"},
{"name":"Centro comercial Moctezuma", "location":"avenue3"},
{"name":"Ernst Handel", "location":"avenue4"},
]
</script>
​
</body>
</html>

Change your code like below
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
​
<body ng-app="myApp" ng-controller="myCtrl">
​
<h1 ng-repeat="x in records" ng-if="$even">
​
<table align=center>
<tr>
<td>{{x}}</td>
<td>{{records[$index+1]}}</td>
</tr>
</table>
</h1>
​
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
​
</body>
</html>

Your $scope is not taking, change your $scope like js array of object. And Give ng-repeat in correct place. Change your code like below.
<html>
<head>
<script src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js "></script>
<script>
var app = angular.module('app',[]);
app.controller('ctrl',['$scope', function($scope){
$scope.records = [{name:"Alfreds Futterkiste", location:"avenue1"},{name:"Berglunds snabbköp", location:"avenue2"},{name:"Centro comercial Moctezuma", location:"avenue3"},{name:"Ernst Handel", location:"avenue4"}];
$scope.records1 = [{name:"Centro comercial Moctezuma", location:"avenue1"},{name:"Ernst Handel", location:"avenue2"},{name:"Berglunds snabbköp", location:"avenue3"},{name:"Alfreds Futterkiste", location:"avenue4"}];
}]);
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<table align=center>
<tr>
<th>Object one</th>
<th>Object two</th>
</tr>
<tr ng-repeat="x1 in records">
<td>{{x1.name}}</td>
<td>{{records1[$index].name}}</td>
</tr>
</table>
<br>
Your code result:-
<h3 ng-repeat="x in records">
<table align=center>
<tr>
<th>Country</th>
<th>Languages</th>
</tr>
<tr>
<td>{{x.name}}</td>
<td>{{x.location}}</td>
</tr>
</table>
</h3>
</div>
</body>
</html>
​$scope.records = [
{name:"Alfreds Futterkiste", location:"avenue1"},
{name:"Berglunds snabbköp", location:"avenue2"},
{name:"Centro comercial Moctezuma", location:"avenue3"},
{name:"Ernst Handel", location:"avenue4"},
];
<table align=center>
<tr ng-repeat="x in records">
<td>{{x}}</td>
<td>{{x}}</td>
</tr>
</table>

Related

AngularJS not displaying json data

I've been stuck for some time now trying to display JSON data in a table with AngularJS 1.6.9.
Here is my index.html:
<!DOCTYPE html>
<head>
<title>Een eenvoudige service</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="service.js"></script>
<link rel="stylesheet" href="style.css">
<script>
</script>
</head>
<div ng-app="mijnApp" ng-controller="mijnController">
<table>
<tr>
<th>ID</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in personen">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
</body>
</html>
Here is my JavaScript:
var App = angular.module('mijnApp', []);
App.controller('mijnController', function($scope, $http) {
$http.get("personen.json").then(function(response) {
$scope.personen = response.data;
});
});
Small example of my json file:
{
"records": [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Ana Trujillo Emparedados y helados",
"City": "México D.F.",
"Country": "Mexico"
}]
}
I've tried multiple methods and the result is always the same - empty table.
How can I resolved this issue? Please help me for the same issue.
Try this:
<tr ng-repeat="x in personen.records">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td>
</tr>
You missed the records from response. use x in personen.records or set de personen in the http response like this $scope.personen = response.data.records;
I prefer the second option personally.
This will help
$.ajax({
url : "personen.json",
dataType : 'JSON',
success : function(data) {
$scope.personen = data;
},
error : function(error) {
console.log( "error occurred." );
}
});
HTML use this to view the records.
<table>
<tr ng-repeat="record in personen.records">
<td> {{record.Name}} </td>
<td> {{record.City}} </td>
<td> {{record.Country}} </td>
</tr>
</table>

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>

New to Angular, getting Uncaught TypeError: Cannot read property '$$minErr' of undefined when trying to run code

I'm new to angular and I'm attempting to take data in a json object and fill a simple table with it. After googling my error, most people are saying that with this error, the url for my library of angular is in the wrong spot, but I'm fairly sure it isn't. Can anyone help me out?
Here's my code
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js"></script>
<body>
<div ng-app="myApp" ng-controller="myAppCtrl">
<table border="1">
<tr>
<th>Name</th>.
<th>Email</th>
<th>Office</th>
</tr>
<tr ng-repeat="x in items">
<td>{{x.Name}}</td>
<td>{{x.Email}}</td>
<td>{{x.Office}}</td></tr>
</table>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.js">
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function($scope, $http) {
$http.get("testData.txt")
.then(function(response) {
var needsJSON = response.data;
var processed = JSON.parse(needsJSON);
console.log(processed);
$scope.items = processed;
});
});
</script>
</body>
</html>
Here is the text document with my data if anyone is interested
{ "Name" : "Test1", "Email" : "test1#test.com", "Office" : "NY" },
{ "Name" : "Test2", "Email" : "test2#test.com", "Office" : "LA" },
{ "Name" : "Test3", "Email" : "test3#test.com", "Office" : "ATL" }
You have wrong angular url, Please use the following code
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<body>
<div ng-app="myApp" ng-controller="myAppCtrl">
<table border="1">
<tr>
<th>Name</th>.
<th>Email</th>
<th>Office</th>
</tr>
<tr ng-repeat="x in items">
<td>{{x.Name}}</td>
<td>{{x.Email}}</td>
<td>{{x.Office}}</td></tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myAppCtrl', function($scope, $http) {
$http.get("testData.txt")
.then(function(response) {
var needsJSON = response.data;
var processed = JSON.parse(needsJSON);
console.log(processed);
$scope.items = processed;
});
});
</script>
</body>
</html>

Why ng-repeat is not working with table?

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>

AngularJS dynamic row generation with HTML formatting

I am using ng-repeat to generate table rows on HTML. I have HTML tags inside my row content that I want to format the content with.But it will only print the text with html tags as plain text without identifying them as HTML tags.
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td>{{styleRowDetail.shortMessage}}
</td>
<td>{{styleRowDetail.classOriginated}}
</td>
<td>{{styleRowDetail.method}}
</td>
<td>{{styleRowDetail.lineRange}}
</td>
<td>{{styleRowDetail.details}}
</td>
</tr>
here's a working code.
var jsondata = [{
"shortMessage": "data 1",
"classOriginated": "data 2",
"method": "<i>data 3</i>",
"lineRange": "data 4",
"details": "<b>data 5</b>"
}];
var app = angular.module('myApp', ['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce) {
$scope.styleRowDetails = jsondata;
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="controller.js"></script>
<h3>Data</h3>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat=" styleRowDetail in styleRowDetails">
<td ng-bind-html="styleRowDetail.shortMessage">
</td>
<td ng-bind-html="styleRowDetail.classOriginated">
</td>
<td ng-bind-html="styleRowDetail.method">
</td>
<td ng-bind-html="styleRowDetail.lineRange">
</td>
<td ng-bind-html="styleRowDetail.details">
</td>
</tr>
</table>
</div>
Hope it helps :)
Simple Example to generate multiple row using ng-repeat Directive in AngularJS.
HTML
<div ng-app="myApp" ng-controller="appCtrl">
<table>
<tr ng-repeat="i in styleRowDetails">
<td>{{i.val}}</td>
</tr>
</table>
</div>
JS
var myApp = angular.module('myApp', [])
myApp.controller('appCtrl', ['$scope', function($scope) {
$scope.styleRowDetails = [{
val: 'welcome'
}, {
val: 'hello'
},{
val: 'world'
}
];
}]);
Working Fiddle: https://jsfiddle.net/rittamdebnath/3oy5fok3/
You should try ng-bind-html
<td ng-bind-html="styleRowDetail.details"></td>
For a better understanding visit the documentation of ng-bind-html by angularjs

Categories