I must be missing something here, but why isn't my table loading with data using Ng-table? I tried following a example but it wont work for me.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example105-production</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="test">
<div ng-controller="ExampleController">
<table ng-table="tableParams">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tr ng-repeat="row in $data">
<td>{{row.name}}</td>
</tr>
</table>
</div>
</body>
</html>
(function(angular) {
'use strict';
angular.module('test', ['ngTable'])
.controller('ExampleController', ['$scope', function($scope) {
var data = [{ name: "Moroni", age: 50 }, {name: "Moroni2", age: 502 }];
this.tableParams = new NgTableParams({}, { dataset: data });
}]);
})(window.angular);
PLUNKR
You forgot to inject in your controller: NgTableParams.
And in dataset change to data as example:
$scope.table = new NgTableParams({}, {
data: data
});
See your example in plunker:
http://plnkr.co/edit/b95EjalSTLd70YuB3ZHH?p=preview
2 changes needed here:
1) Put the data on the scope of the controller to share with the view:
$scope.data = [{name: 'Mor .....;
2) Use the name of the scope variable (data) in the html
<tr ng-repeat="row in data">
Make this change controller
$scope.data = [{ name: "Moroni", age: 50 }, {name: "Moroni2", age: 502 }];
// this.tableParams = new NgTableParams({}, { dataset: data });
and use
ng-repeat="row in data"
Related
I have an ng-repeat that iterates over a document where I want to do a " | filter:search", but want the filter to run on specific fields in the document.
I found a couple examples, that just don't work.
(I have an input field with a model=search)...
The way they say you target specific fields is like this:
<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>
I remember doing something in the past and I think this is close, but not quite.
Any help?
<div ng-repeat="obj in objs | filter:filterFn">{{obj.name}}</div>
see this is the function : filterFn
$scope.filterFn = function(elm)
{
if($scope.filterlocation[elm.location])
{
return true;
}
return false;
};
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
first_name: 'Programmer',
last_name: '21',
},{
first_name: 'Abc',
last_name: 'Xyz'
},{
first_name: 'Kunvar',
last_name: 'Singh'
},{
first_name: 'Cnak',
last_name: '2'
}
];
})
})();
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="angular-filter#0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
<table>
<tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText">
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they
will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
</body>
</html>
This is an example for a table to search for eachColumn and for all colums in an input all.
Heres the example ->pnlkr
All can be done in the view.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as rchCtrl">
<div>
<label>Search</label>
<input ng-model="searchAll">
<hr>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-model="searchID">
</td>
<td>
<input ng-model="searchName">
</td>
<td>
<input ng-model="searchAge">
</td>
</tr>
<tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.peoples = [
{id:1, name:'Kalesi', age:50},
{id:2, name:'Jon', age:43},
{id:3, name:'Jonas', age:34},
{id:4, name:'Sam', age:29},
{id:5, name:'Samuel', age:50},
{id:6, name:'Tyrion', age:20}
];
});
So i have two arrays, One looks a little liek this
$scope.users = {id: 1, email: xxx} {id: 2, email: xxx}....
and i have this one
$scope.booking = {id: 20, regid: 2} ....
So the users is being displayed in a table at the moment.
however if the user has a booking, i want the table row to have a red flag against it (cant share table but its a basic ng-repeat) So if the usersid exists the regid in the booking array, push something to the user
Any help would be wicked
First of All your $scope.users and $scope.booking are objects not arrays...
i make an example how to know if users has book, so heres is the code and the
plnkr
the magic is in the foreach and for loops.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<thead>
<th>ID</th>
<th>NAME</th>
<th>HAS BOOK</th>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.hasBook}}</td>
</tr>
</tbody>
</table>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.users = [
{id:1, name:'john'},
{id:2, name:'barney'},
{id:3, name:'moroni'},
{id:4, name:'adam'},
{id:5, name:'sam'}
];
$scope.books = [
{id:1, regId:1, name:'book1'},
{id:2, regId:2, name:'book1'},
{id:5, regId:3, name:'book1'},
];
angular.forEach($scope.users, function(value, index){
for(var i =0; i< $scope.books.length; i++){
if(value.id === $scope.books[i].id){
value.hasBook = true;
}
}
});
console.log($scope.users);
});
You can use filters to find if any user with a conrcrete userid is in booking table.
Check this example:
[http://jsbin.com/ewitun/1/edit?html,js,output][1]
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>
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
What i need is when i change the value from child window textbox the reflect should appear on parent window records in a table. And here is my parent.html.
-----index.html--------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<form method=post action='' name=f1>
<table border="1" >
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th> Edit here</th>
</tr>
<tr ng-repeat="person in people">
<td><span id="d" name='p_name'>{{person.id}}</span></td>
<td><span id="c" name='q_name'>{{person.name}}</span></td>
<td><span id="e" name='r_name'>{{person.age}}</span></td>
<td>Edit</td>
</tr>
</table>
</form>
</div>
</div>
<script>
var myApp=angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$window) {
$scope.people = ([
{
id: 1,
name: "Peter",
age: 21},
{
id: 2,
name: "David",
age: 20},
{
id: 3,
name: "Anil",
age: 22}
])
$scope.foo = function() {
$window.open('index1.html');
};
});
</script>
And here is my child window:
------index1.html-------
<!DOCTYPE html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script>
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
opener.document.f1.q_name.value = document.frm.d_name.value;
opener.document.f1.r_name.value = document.frm.e_name.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body ng-app="mainApp" >
<div ng-controller='childController'>
<form name="frm" method=post action=''>
<table border="0">
<tr><td>Enter id:</td><td><input id="d" type="text" name="c_name" ></td></tr>
<tr><td>Enter name:</td><td><input id="c" type="text" name="d_name" ></td></tr>
<tr><td>Enter age:</td><td><input id="e" type="text" name="e_name" ></td></tr>
<tr><td><button onclick="post_value();">Save</button></td></tr>
</table>
</form>
</div>
</body>
</html>
And here is my plunker: http://plnkr.co/edit/qF2zvp0VYY9wMvWzt3XK?p=preview
You shouldn't open details in other window. Then you can't persist data in your app because there is no way to communicate between two windows.
I don't think so you should make this thing this complicated as you can make you app as SPA (Single Page Application), For that you need to use ng-route which will dynamically load the pages on basis of url changes.
Using below html
<div ng-view></div>
Then you need write configuration for you app, when to load which template with which controller
Config
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/people', {
templateUrl: 'people.html',
controller: 'PeopleCtrl'
})
.when('/people/:id', {
templateUrl: 'details.html',
controller: 'detailsCtrl'
})
.otherwise({
redirectTo: '/people'
});
}
]);
Working Plunkr here