I have downloaded the zip of this plunkr (http://plnkr.co/edit/ISa4xg?p=preview) on my computer. When I run the example the table shows but css style is not applied (for example, pagination is in an ugly way). Anyone knows why do I have this problem?
Thanks in advance.
just simple example to show data into table
// Try like this ............
<!DOCTYPE html>
<html>
<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 border="1">
<tr>
<th data-ng-click="doSort('name')">Name</th>
<th data-ng-click="doSort('city')">City</th>
<th data-ng-click="doSort('Money')">Money</th>
</tr>
<tr data-ng-repeat="person in customer | orderBy:sortBy:reverse | filter:nameText |filter:nameOnly |filter:cityOnly |filter:MoneyOnly">
<td> {{ person.name }} </td>
<td> {{ person.city}} </td>
<td> {{ person.Money}} </td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sortBy= 'name';
$scope.reverse= false;
$scope.customer= [{name:'Rasel',city:'Dhaka',Money:'10'},
{name:'Jon',city:'Khulna',Money:'20'},
{name:'Mr. Fox',city:'Rajshahi',Money:'30'},
{name:'Nabil',city:'Comilla',Money:'40'}];
});
</script>
</body>
</html>
Related
HI Im new to angular js im trying to display the json content as table.is it possible to change the color based on the value in the json content?
i've tried by adding ng-class which was not working.
Please find the code i've tried
angular.module('mApp')
.controller('mController', main);
function main($http) {
var vm = this;
vm.name = "sathya";
var jsonData = '{"header":{"columns":[{"name":"Services","subcolumns":[{"name":""}]},{"name":"Server1","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server2","subcolumns":[{"name":"Status"},{"name":"Action"}]},{"name":"Server3","subcolumns":[{"name":"Status"},{"name":"Action"}]}]},"rows":{"data":[[{"value": "Service1"}, {"value": "Running"}, {"value": "action"}, {"value": "Stopped"}, {"value": "Action"}, {"value": "Running"}, {"value": "Action"}],[{"value":"Service2"},{"value":"Running"},{"value": "Action"},{"value": "Stopped"},{"value":"Action"},{"value":"Running"},{"value": "Action"}]]}}';
vm.table = JSON.parse(jsonData);
vm.subHeaders = function () {
var subs = [];
vm.table.header.columns.forEach(function (col) {
col.subcolumns.forEach(function (sub) {
subs.push(sub);
});
});
return subs;
};
<!DOCTYPE html>
<html ng-app="mApp">
<head>
<meta charset="utf-8" />
</head>
<body ng-controller="mController as mn">
<div class="main">
<div class="bodycontent">
<div class="mainnav">
<div>
<table class="table table-bordered">
<tr>
<th colspan="{{col.subcolumns.length}}" ng-repeat="col in mn.table.header.columns">{{col.name}}</th>
</tr>
<tr>
<th ng-repeat="col in mn.subHeaders()">{{col.name}}</th>
</tr>
<tr ng-repeat="row in mn.table.rows.data">
<td ng-repeat="cell in row" ng-class="{'status_green' : cell.value=='Running', 'status_red' : cell.value=='Stopped'}">{{cell.value}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!---->
<script src="Scripts/angular.min.js"></script>
<script src="App/app.module.js"></script>
<script src="App/Main.js"></script>
</body>
</html>
you could use ng-if statement and try with this:
<div ng-repeat="i in jsonData" style="width:25%">
<table class="table table-bordered" ng-repeat="a in i.data">
<tr>
<th>Value</th>
</tr>
<tr ng-repeat="v in a">
<td ng-if="v.value !== 'Success'"> {{v.value}}</td>
<td ng-if="v.value === 'Success'" style="color:green"> {{v.value}}</td>
</tr>
</table>
</div>
plunker: http://next.plnkr.co/edit/99ySQe5flCzaDbax?preview
Hope it helps!
here what i did, and it's simple
<td><h6 ng-show="employee.status=='Active'" class="green">{{employee.status}}</h6><h6 ng-show="employee.status=='Deactive'" class="yellow">{{employee.status}}</h6> </td>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr>
<th></th>
<th>Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in names">
<td>{{$index+1}}</td>
<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")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Hai Guys,
I am using ng-repeat to display the table records and $index+1 to display the serial number.
I want to display the Header Name and Country to repeat for every 2 records(if $index %2 == 0).
How will i do it?
Any idea please.
Well i found my own answer.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-repeat-start="x in names">
</div>
<div ng-if="$index % 2==0">
<table ng-repeat="x in names | limitTo:1">
<tr>
<th>S No</th>
<th>Name</th>
<th>Country</th>
</tr>
</table>
</div>
<table ng-repeat-end="x in names">
<tr>
<td>{{$index + 1}}</td>
<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("customers.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
I am creating a plunker for another question but I cannot get angular-datatables to sort without configuration.
I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.
Am I missing any sort of configuration or overlooking anything?
How do I make the table sortable using default settings?
Plunkr
https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info
HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.9.4" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script data-require="datatables#1.9.4" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript" data-require="angular.js#1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
<script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<tr>
<th>Product</th>
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
<td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
<td class="td-line-height">{{data.TagName}} </td>
<td class="td-line-height">{{data.UnitSize}} </td>
<td class="td-line-height">{{data.UnitCost | currency}} </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
for some reason angular-datatables.js is calling isDataTable function while jquery.dataTables.js defines this function as fnIsDataTable, so, to solve it, just add
$.fn.dataTable.isDataTable = $.fn.dataTable.fnIsDataTable;
as your first line in your controller.
here is the error message:
VM892 angular.js:9563TypeError: $.fn.dataTable.isDataTable is not a function
at Object.renderDataTable (VM1134 angular-datatables.js:753)
at Object.hideLoadingAndRenderDataTable (VM1134 angular-datatables.js:773)
at VM1134 angular-datatables.js:910
at VM892 angular.js:13777
at completeOutstandingRequest (VM892 angular.js:4236)
at VM892 angular.js:4537
updated plunker: https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p=preview
It doesn't list with ng-repeat. What is wrong with this code snippet?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="MyApp">
<div ng-init="courses = [{"Number":"CREOO11","Name":"Design Pattern 101","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO12","Name":"Design Pattern 102","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO13","Name":"Design Pattern 103","Instructor":"Yunus Emre KESKIN"}]">
<div class="row">
<table>
<tr>
<th> Course Number </th>
<th> Course Name </th>
<th> Instructor </th>
</tr>
<tr ng-repeat="c in courses">
<td> {{c.Number}} </td>
<td> {{c.Name}} </td>
<td> {{c.Instructor}} </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
There were two issues in the above code:
1. MyApp angular module is not available while you have used it in your html file
2. Way to initialized courses is not correct
Correct code is attached below:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MyCntrl', function($scope) {
$scope.courses = [{"Number":"CREOO11","Name":"Design Pattern 101","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO12","Name":"Design Pattern 102","Instructor":"Yunus Emre KESKIN"},
{"Number":"CREOO13","Name":"Design Pattern 103","Instructor":"Yunus Emre KESKIN"}];
});
</script>
<body>
<div ng-app="MyApp">
<div ng-controller="MyCntrl">
<div class="row">
<table>
<tr>
<th> Course Number </th>
<th> Course Name </th>
<th> Instructor </th>
</tr>
<tr ng-repeat="c in courses">
<td> {{c.Number}} </td>
<td> {{c.Name}} </td>
<td> {{c.Instructor}} </td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
I am writing a basic angular routing code ,in which if user clicks on show details the corresponding order id will be displayed.I am getting the error.Where am i going wrong ? I have added a sample HTML file.
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td>show details</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
You need the ngRoute module
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js
After you have this script in your html add it as a dependency
var sample=angular.module("sample",['ngRoute']);