I'm working with bower (json file below).
I'm failing to initiate simple ngGrid. It's so simple (ng grid is awesome i must say) that i don't know what i'm doing wrong.
index.jade:
div(ng-controller='Ctrl')
div(style="border: 1px solid rgb(212,212,212); width : 400px; height: 300px", ng-grid='gridOptions')
controller.coffee:
'use strict'
angular.module('client.controllers', [])
.controller('Ctrl', [
'$log'
'$scope'
($log, $scope) ->
$scope.gridOptions = {
data: 'myData'
enablePinning: true
columnDefs: [
{ field: "name", width: 120, pinned: true },
{ field: "age", width: 120 },
{ field: "birthday", width: 120 },
{ field: "salary", width: 120 }
]
}
$scope.myData = [
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" }
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" }
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" }
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" }
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" }
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" }
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "40,000" }
{ name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "50,000" }
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
]
])
and what i'm getting is:
bower json:
{
"name": "main",
"version": "0.0.0",
"authors": [
"gumba"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"querystring":"*",
"angular": "*",
"angular-sanitize": "*",
"angular-resource": "*",
"angular-route": "*",
"angular-cookies": "*",
"angular-mocks": "*",
"bootstrap": "*",
"sugarjs": "*",
"datatables":"*",
"ng-grid":"*"
}
}
Downgrading ng-grid from 2.0.14 to 2.0.11 did the job for me.
I guess it's just some backwards compatibility issue that will be solved in later versions so nothing interesting here.
Related
I am trying to compare the age and gender in JSON and trying to print the corresponding name for the details. but its nor working for me.
_.each(response.details, function(value, key){
if (value.age == "12" && value.gender == "male") {
console.log(value.name + "name")
}
});
JSON:
details: [
{
age: "12",
gender: "male",
name: "danny"
},
{
age: "13",
gender: "male",
name: "sunny"
},
{
age: "12",
gender: "female",
name: "janny"
},
{
age: "14",
gender: "female",
name: "josef"
}
],
your code just works, I added _.result() and _.find() functions:
var details = [{
age: "12",
gender: "male",
name: "danny"
}, {
age: "13",
gender: "male",
name: "sunny"
}, {
age: "12",
gender: "female",
name: "janny"
}, {
age: "14",
gender: "female",
name: "josef"
}];
console.log(_.result(_.find(details, {
age: '12',
gender: 'male'
}), 'name') + 'name');
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>
Why use lodash for this, javascript provides this support natively via filter!
var details = [{
age: "12",
gender: "male",
name: "danny"
}, {
age: "13",
gender: "male",
name: "sunny"
}, {
age: "12",
gender: "female",
name: "janny"
}, {
age: "14",
gender: "female",
name: "josef"
}];
var results = details.filter(function(row) {
if (row.age == "12" && row.gender == "male") {
return true;
}
});
results.forEach(function(result) {
console.log(result.name + ' name');
})
I'm using ngTable to display some data and I need an initial way of sorting order to display it at page load. There's the normal option to set the sorting, for example sorting: {color: "asc"}, this will sort the color column alphabetically. Assuming this is my table data:
var x = [
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "billy", age: 31, color:"blonde"},
{name: "bones", age: 47, color:"grey"},
{name: "michael", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonardo", age: 12, color:"brown"},
{name: "dicaprio", age: 73, color:"pink"},
{name: "sylvester", age: 35, color:"blonde"}
];
How can I set the initial sort order of the color column by custom order, such as first all green, then all pink then all yellow and last grey.
This is my code so far:
function demoController(NgTableParams, simpleList) {
var names = [
{name: "allen", age: 33, color:"green"},
{name: "jon", age: 23, color:"blonde"},
{name: "silver", age: 54, color:"yellow"},
{name: "james", age: 52, color:"grey"},
{name: "flint", age: 25, color:"pink"},
{name: "billy", age: 31, color:"blonde"},
{name: "bones", age: 47, color:"grey"},
{name: "michael", age: 35, color:"green"},
{name: "jackson", age: 234, color:"yellow"},
{name: "leonardo", age: 12, color:"brown"},
{name: "dicaprio", age: 73, color:"pink"},
{name: "sylvester", age: 35, color:"blonde"}
];
this.tableParams = new NgTableParams({
// initial sort order
sorting: { color: ["green","pink","yellow","grey"] }
}, {
dataset: names
});
}
Code is here.
Did you add the sort attribute in the directive?
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
I am trying to load an ng-grid when a button is clicked but it is not working.
But it works well on load. Why?
HTML:
Load Grid
<div ng-grid="ngOptions"></div>
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
$scope.loadGrid = funtion(){
$scope.ngOptions = { data: 'ngData' };
};
You can initialize the data with an empty array, so that ng-grid is proparly initialized, and then change the data on-click like this:
$scope.myData = [];
$scope.ngOptions = { data: 'myData' };
$scope.loadGrid = function(){
$scope.myData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
};
Here's a working plunker
Please check this http://plnkr.co/edit/8H4NHFP59gWTxURwQKZw?p=preview
HTML :
Load Grid
<div ng-show="ngData.length">
<div ng-grid="ngOptions" ></div>
</div>
Controller
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.ngData = [];
$scope.ngOptions = {
data: 'ngData'
};
$scope.loadGrid = function() {
$scope.ngData = [
{ Name: "Moroni", Age: 50, Position: 'PR Menager', Status: 'active', Date: '12.12.2014' },
{ Name: "Teancum", Age: 43, Position: 'CEO/CFO', Status: 'deactive', Date: '10.10.2014' },
{ Name: "Jacob", Age: 27, Position: 'UI Designer', Status: 'active', Date: '09.11.2013' },
{ Name: "Nephi", Age: 29, Position: 'Java programmer', Status: 'deactive', Date: '22.10.2014' }
];
}
});
Trying to create a ng-grid with a link ie anchor in the first column. It is supposed to redirect to another page ie person passing in the Id for the person:
{{row.getProperty(name)}
My controller looks like this:
$scope.gridOptions = {
data: 'myData',
enablePinning: true,
columnDefs: [
{
field: 'id',
displayName: 'PersonLink',
enableCellEdit: false,
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">{{row.getProperty(name)}</div>'
},
{ field: "name", width: 120, pinned: true },
{ field: "age", width: 120 },
{ field: "birthday", width: 120 },
{ field: "salary", width: 120 }
]
};
$scope.myData = [
{ id:1,name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ id:2,name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ id:3,name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ id:4,name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ id:5,name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
];
});
The link is not even displaying, can someone help out? thanks
Here is the plnkrlink:http://plnkr.co/edit/Yg1fVjVviZPQgwlpVNPb?p=preview
I have tried to fix your fiddle. The updated fiddle is here
http://plnkr.co/edit/hbN32G9KDU0vjR36tKgh?p=preview
The thing that needed fix were you were missing ending }
{{row.getProperty(col.field)}
Also pinned:true is not working maybe because you are doing it on second column. I moved it to first and it works.
Also the expression which refers a string should be fixed here
{{row.getProperty(\'name\')}}
ngGrid is converting my NULL cells to 0 or an empty string ("") based on the column type.
I need this displayed as 'NULL' instead. What is an efficient way to do this? There could be 10,000+ rows of data displayed in the Grid.
Simple Plunker displaying undesired behaviour:
http://plnkr.co/edit/MwAotQ?p=preview
(notice 0, "", or $0.00 instead of NULL).
Thanks!
->> Josh <<-
Create a custom filter that extends the original filter. Here is how you would do it for your date column:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", width: 120 },
{ field: "age", width: 120, cellFilter: 'number' },
{ field: "birthday", width: 120, cellFilter: 'nullDateFilter' },
{ field: "salary", width: 120, cellFilter: 'currency' }]
};
$scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: 60000 },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: 70000 },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: 50000 },
{ name: null, age: null, birthday: null, salary: null },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: 30000 }];
});
app.filter('nullDateFilter', function($filter) {
return function(input) {
var originalFilter = $filter('date');
return input == null ? 'null' : originalFilter(input);
};
});