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]
Related
I am using Angularjs for my application.I am facing issue in using Pagination option.I am using dir-paginate option for creating pagination.
Here is my html
<tr data-dir-paginate="college in colleges | itemsPerPage: 10"
data-current-page="currentPage">
<td>{{$index + 1}}</td>
<td><a href="#!/collegedetails/{{college.collegeId}}">
{{college.name}}</a></td>
<td>{{college.typeName}}</td>
</tr>
Here is my Controller.js
var Controller = function($scope, $rootScope)
{
var app = angular.module('adminApp',
['angularUtils.directives.dirPagination']);
$scope.currentPage = 1;
$scope.itemsPerPage = 10;
$scope.getAllColleges = function()
{
AdminCollegeService.getAllColleges().then(function(response){
$scope.colleges=response.data;
});
}
}
I have included dirPagination.js in my index page.But now it is displaying empty page.Sometimes it just keeps on loading continously without stopping.I am getting response from controller but i am not able to display in html.Am i missing something in the code?
I put a sample in plnk
I guessing for your code..
you need to call the getAllColleges() in somewhere.
check the link if it helps also put the code below here.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<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="dirpaginatio.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{colleges}}
<table class="table table-stripped" >
<tr data-dir-paginate="college in colleges | itemsPerPage: 3"
data-current-page="currentPage">
<td>{{$index + 1}}</td>
<td><a href="#!/collegedetails/{{college.collegeId}}">
{{college.name}}</a></td>
<td>{{college.typeName}}</td>
</tr>
</table>
<dir-pagination-controls on-page-change="pageChangeHandler(newPageNumber)" ></dir-pagination-controls>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', ['angularUtils.directives.dirPagination']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.currentPage = 1;
$scope.itemsPerPage = 3;
$scope.getAllColleges = function()
{
//AdminCollegeService.getAllColleges().then(function(response){
//$scope.colleges=response.data;
//});
$scope.colleges = [
{name:'one', typeName:'a'},
{name:'two', typeName:'b'},
{name:'three', typeName:'c'},
{name:'four', typeName:'d'},
{name:'five', typeName:'e'}
];
};
$scope.getAllColleges();
});
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}
];
});
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>
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"
I'm using angular-datatables ( http://l-lin.github.io/angular-datatables/#/welcome ).
I put up this Plunker: http://plnkr.co/edit/ZRvQt7KBZam22Yt5S4QC?p=preview .
I'm trying to dynamically change the number of columns in my datatable, based on data pulled from the server. Is there a way to do this ? I'm using the control "the Angular way':
<table datatable="ng"></table>
Thank you in advance for taking time to look at this.
index.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" />
</head>
<body ng-controller="MainCtrl as mCtrl">
<table id="dtFeeDetails" datatable="ng" dt-options="mCtrl.dtOptionsForFeeDetails" dt-column-defs="mCtrl.dtColumnDefs" dt-instance="mCtrl.dtInstance">
<tbody>
<tr dt-rows ng-repeat="f in feeData">
<td ng-repeat="c in colHeadings">{{f[c.Value]}}</td>
</tr>
</tbody>
</table>
<p>
<button type="button" ng-click="changeColumnDefs()">Change column defs</button>
</p>
<script data-require="jquery#1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script type="text/javascript" src="https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="app.js"></script>
app.js
var app = angular.module('plunker', ['datatables']);
app.controller('MainCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {
var vm = this;
$scope.feeData = [{ val1: 'data1'}, { val1: 'data2'}];
$scope.colHeadings = [{ Value: 'val1' }];
vm.dtInstance = {};
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value)
];
vm.dtOptionsForFeeDetails = DTOptionsBuilder.newOptions();
var dtFeeDetailsID = "dtFeeDetails";
$scope.changeColumnDefs = function() {
//$('#' + dtFeeDetailsID).DataTable().destroy();
//$('#' + dtFeeDetailsID).dataTable();
// this won't work, because we're changing the number of columns
$scope.colHeadings = [{ Value: 'val1' }, { Value: 'val2' }];
$scope.feeData = [{ val1: 'data3', val2: 'data5'}, { val1: 'data4', val2: 'data6'}];
vm.dtColumnDefs = [];
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value),
DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[1].Value)
];
// this will work, because we're keeping the same number of columns
//$scope.colHeadings = [{ Value: 'val2' }];
//$scope.feeData = [{ val2: 'data3'}, { val2: 'data4'}];
//vm.dtColumnDefs = [];
//vm.dtColumnDefs = [
// DTColumnDefBuilder.newColumnDef(0).withTitle($scope.colHeadings[0].Value),
// ];
};
});