I am currently working on developing a grid component using HTML / AngularJS. The column data are rendered dynamically.
I am trying to format the data displayed based on the dataType. The data types could be like currency / date / number format. Conceptually, I am trying to achieve like the below one.
Is it possible?
<td ng-repeat="row in rows" title="{{row.toolTip}}">
{{row.displayData | row.dataType: row.format}}
</td>
Format your data with AngularJS filters
AngularJS provides some filters: currency, lowercase, uppercase (http://www.w3schools.com/angular/angular_filters.asp) or you can define your own filter
Example:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
name: "Item1",
price: 50.3
}, {
name: "Item2",
price: 15.55
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="x in data">
<td>{{ x.name }}</td>
<td>{{ x.price | currency }}</td>
</tr>
</table>
</div>
Here I modified the W3schools example using a conditional in the ng-style definition to change the CSS style
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names" ng-style="{'background-color':(x.Country == 'UK')?'blue':'gray'}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function(response) {
$scope.names = response.records;
});
});
</script>
Related
I'm working on the project at school. They asked me to use $http.post to enter 2 value Day and Customer and show the json data in table. Could you help me with this, I've researched on how to use $http.post and fix the code but it won't work. Please show me what am I misunderstand or there is any way else to complete this. Thank you very much.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> $http.post </title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f5f5f5;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="postapp" ng-controller="postservice">
<div>
Day : <input ng-model="day"><br /><br />
Customer : <input ng-model="customer"><br /><br />
<input type="button" value="Send" ng-click="postdata(day, customer)">
<br /><br />
</div>
<table>
<tr>
<th>ID</th>
<th>Status</th>
<th>Environment</th>
<th>Host</th>
<th>IP</th>
<th>Description</th>
<th>Time</th>
</tr>
<tr ng-repeat="x in names">
<td>{{ x.ID}}</td>
<td>{{ x.Status}}</td>
<td>{{ x.Environment}}</td>
<td>{{ x.Host}}</td>
<td>{{ x.IP}}</td>
<td>{{ x.Description}}</td>
<td>{{ x.Time}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('postapp', []);
app.controller('postservice', function postservice($scope, $http) {
$scope.day = null;
$scope.customer = null;
$scope.postdata = function(day, customer) {
var data = {
day: day,
customer: customer
};
$http.post("https://b0gtju7vp5.execute-api.us-east-
1.amazonaws.com/staging", JSON.stringify(data))
.success(function(response) {
$scope.names = response;
});
};
});
</script>
</body>
Here is view what I have to do, hope this will make it more clearly.View pic
Jazzed it up a bit and added a loading spinner for you.
Also with the request being cross origin i.e making a request to a different url than the site it runs on you will need to run Chrome with CORS disabled. Chrome blocks these requests by default and you have to switch it of for development.
In the run box in windows paste in the following:
chrome.exe --user-data-dir="C://Chrome-dev-session" --disable-web-security
If you have a mac google 'How to run Chrome with CORS disabled'.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> $http.post </title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f5f5f5;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<div ng-app="postapp" ng-controller="postservice">
<!-- Loading spinner that will be shown when requst is in progres -->
<div ng-if="isLoading">
loading data...
</div>
<!-- Hide the page content when loading data -->
<div ng-if="!isLoading">
<div>
Day :
<input ng-model="day">
<br />
<br /> Customer :
<input ng-model="customer">
<br />
<br />
<input type="button" value="Send" ng-click="getNames(day, customer)">
<br />
<br />
</div>
<table>
<tr>
<th>ID</th>
<th>Status</th>
<th>Environment</th>
<th>Host</th>
<th>IP</th>
<th>Description</th>
<th>Time</th>
</tr>
<tr ng-repeat="name in names">
<td>{{ name.ID}}</td>
<td>{{ name.Status}}</td>
<td>{{ name.Environment}}</td>
<td>{{ name.Host}}</td>
<td>{{ name.IP}}</td>
<td>{{ name.Description}}</td>
<td>{{ name.Time}}</td>
</tr>
</table>
</div>
<pre>{{names | json}}</pre>
</div>
<script>
var app = angular.module('postapp', []);
app.controller('postservice', function postservice($scope, $http) {
$scope.day = null;
$scope.customer = null;
$scope.names = [];
$scope.isLoading = false;
$scope.getNames = function (day, customer) {
$scope.isLoading = true;
var data = {
day: day,
customer: customer
};
var url = "https://b0gtju7vp5.execute-api.us-east-1.amazonaws.com/staging";
$http.post(url, data)
.then(
function (response) {
$scope.names = response;
$scope.isLoading = false;
},
function (error) {
alert('Failed to post data');
$scope.isLoading = false;
});
};
});
</script>
</body>
</html>
i have to populate the data into the table using ng-repeat in the td section if the value is number the text should be aligned to right if it is text or alpha numeric it should be at the left of td.
Below is the example which matches your requirement.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div
ng-app="myApp"
ng-controller="myCtrl">
<table style="border:1px solid black">
<tr ng-repeat="x in sectionUndecoratedList" style="border:1px solid black">
<td ng-class="x.isNumber ? 'center':'left'">{{ x.activites }}</td>
</tr>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
</table>
</div>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
.center {
text-align: center
}
.left {
text-align: left
}
</style>
</body>
</html>
Controller
(function(){
angular
.module('myApp',[])
.controller('myCtrl', Controller);
Controller.$inject = ['$rootScope', '$scope'];
function Controller($rootScope, $scope){
activate();
/**
* #method activate
* #description function to be called when controller is activate
*/
function activate(){
$scope.sectionHeader = 'Activities';
$scope.sectionUndecoratedList = [
{'activites':'demo'},
{'activites':'3'},
{'activites':'test'},
{'activites':'1'}
]
var reg = new RegExp('^[0-9]$');
for (var i = 0; i < $scope.sectionUndecoratedList.length; i++) {
var a = $scope.sectionUndecoratedList[i];
if(reg.test(a.activites)){
a.isNumber = true;
}
}
}
}
})();
Sharing the working demo for your reference http://jsbin.com/robovoperu/edit?html,js,console,output
I have a table with the rows populated by Angular.
I'm wondering if there is a "better" way of specifying the class for each row than in the javascript dataset? The classes tr1 and tr2 set an alternating background color for the table rows.
<!doctype html>
<html ng-app="store">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('store', []);
app.controller('storeController', function() {
this.gems = dataArray;
});
var dataArray = [{
name: 'diamond',
trClass: 'tr1',
}, {
name: 'ruby',
trClass: 'tr2',
}, {
name: 'sapphire',
trClass: 'tr1',
}, {
name: 'emerald',
trClass: 'tr2',
}];
})();
</script>
<style>
.tr1 {
background-color: yellow;
}
.tr2 {
background-color: white;
}
</style>
</head>
<body ng-controller="storeController as products">
<table border="1">
<tr ng-repeat="gem in products.gems" class="{{ gem.trClass }}">
<td>{{gem.name}}</td>
</tr>
</table>
</body>
</html>
You could use ng-class-odd and ng-class-even to alternately apply your classes.
Yo can change class like as-
<table border="1">
<tr ng-repeat="gem in products.gems" ng-class="{$index%2==0?'tr2':'tr1'}">
<td>{{gem.name}}</td>
</tr>
</table>
Im getting : Blocked loading resource from url not allowed by $sceDelegate policy. URL: //www.youtube.com/embed/61aM0DXpKkc on the following
<!DOCTYPE html>
<html >
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Title }}</td>
<td>
<iframe class="youtube-player" ng-src="{{'//www.youtube.com/embed/' + x.URL}}" frameborder="0" allowfullscreen></iframe>
</td>
<td>{{ x.URL }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://angular.webiflex.co.uk/connect.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
app.js
var app = angular.module('plunker', [])
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*//www.youtube.com/embed/**'
]);
});
http://plnkr.co/edit/L2kvZW8Uh45HeiGeaFtl?p=preview but am not sure what Im doing wrong as have used resourceUrlWhitelist.
I managed to solve it http://plnkr.co/edit/L2kvZW8Uh45HeiGeaFtl
by adding
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $sce) {
$http.get("http://angular.webiflex.co.uk/connect.php")
.then(function (response) {$scope.names = response.data.records;});
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
};
});
and then
ng-src="{{trustSrc('//www.youtube.com/embed/' + x.URL)}}"
I'm new to angularjs, whenever i request get data from server i will get error status 0. Can someone point out, what wrong with my code.
HTTPGET
Huge Data in terms of 1000+ entries
WCF RESTFull Services
index.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="client in Clients">
<td>{{ client.id}}</td>
<td>{{ client.name }}</td>
</tr>
</table>
</div>
</body>
</html>
script
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
$http.get("http://localhost:8080/Clients.svc/getclients&clinetid=?")
.success(function (data, status, headers, config) {
$scope.Clients = data.clients;
})
.error(function (data, status, headers, config) {
alert(status);
});
});
</script>