I would like my grid to show rows that only matches a creteria. For example i want my grid to show only the rows where name is Brian.
var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.myData = [{name: "Brian", code: 50,count:20},
{name: "Jason", code: 43,userid:1},
{name: "Brian", code: 27,userid:10},
{name: "Devon", code: 29,userid:7},
{name: "Kale", code: 34,userid:2}];
$scope.gridOptions = {
enableSorting: true,
data:'myData',
columnDefs: [
{ field: 'name', displayName: 'Name'},
{field: 'code', displayName: 'Code'},
{ field: 'userid', displayName: 'UserId'
}
}
]
};
}]);
how can i accomplish that? Thank you in advance...
One of the work around would be, Instead of passing myData do filter you criteria and then assign that filtered data to new scope variable and assign that inside your gridOptions data field
Code
$scope.filteredData = myData; //make filter your data manually here
$scope.gridOptions = {
enableSorting: true,
data:'filteredData', //passed filtered data here.
columnDefs: [
{ field: 'name', displayName: 'Name'},
{field: 'code', displayName: 'Code'},
{ field: 'userid', displayName: 'UserId'
}
}
]
};
You need to use a filter. You can read about the standard angular filter here. You can read about how to make custom filters here.
Related
Has anyone seen this problem and know what's going on? If you load this with chrome dev tools open you will see a 400 error ( Bad Request )
http://plnkr.co/edit/fRhBgC4SmPYL8udb007y?p=preview
The problem appears when you use an row.entity.imgurl inside the cellTemplate.
var testApp = angular.module('testApp', ['ui.grid']);
testApp.controller('TestCtrl', function($scope) {
$scope.grid = {
rowHeight: 50,
data: [{
name: 'Test',
label: 'Suwako Moriya',
imgurl: 'http://i.imgur.com/945LPEw.png'
}],
columnDefs: [
{ field: 'name'},
{ field: 'label', displayName: 'Name',
cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP"><img alt="{{COL_FIELD CUSTOM_FILTERS}}" src="{{row.entity.imgurl}}"/>'
}
]};
});
You can use:
ng-src="{{row.entity.imgurl}}"
I'm trying to apply a simple filter on ui-grid cells and add a tooltip to them but it's not working.
The filter is working correctly but not the tooltip. it's only displayed when I remove the filter.
cellFilter: 'number: 2', cellTooltip: 'Custom tooltip - maybe some help text'
here is a plunker with the example I'm talking about.
any help is really apreciated
You can fix this issue introducing custom filter - formatNumber to format the number cellFilter: 'formatNumber:2' with tooltip -
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.gridOptions = {
columnDefs: [{
field: 'name'
}, {
field: 'amount',
name: 'Number',
cellFilter: 'formatNumber:2',
cellTooltip: 'Custom tooltip - maybe some help text'
}, {
field: 'amount',
name: 'Currency',
cellFilter: 'formatNumber:2',
cellTooltip: 'Custom tooltip - maybe some help text'
}, ]
};
$http.get('data.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
app.filter('formatNumber', function() {
return function(input, decimalPlaces) {
if (isNaN(input))
return input;
else {
return input.toFixed(decimalPlaces);
}
};
});
I got stuck while calling a function inside controller(listCtrl) from ng-click inside ng-grid
asset.js.coffee
app = angular.module('asset',[]).namespace(true)
app.controller 'linkCtrl', ['$scope','Restangular','asset.ProcServiceTools',($scope,Restangular,ProcServiceTools) ->
Restangular.all('asset').customGETLIST("linktogroup",{}).then (data) ->
$scope.myData = data
$scope.dynamicColumnDefs =ProcServiceTools.getIndexDynamicColumnDefs(data)
$scope.customoptions = ProcServiceTools.getCustomOptions()
$scope.linking = () ->
console.log("checkout")
]
app.service 'ProcServiceTools', () ->
class Tools
getIndexDynamicColumnDefs: (data) ->
return [
{field: 'id', displayName: 'ID' },
{field: 'asset_group_id', displayName: 'Group_ID' },
{field:'asset_catalog_id', displayName:'Catalog_id' },
{field: 'condition', displayName: 'Condition' },
{field: 'notes', displayName: 'Notes' },
{field: 'status', displayName: 'Status' },
{field: 'current_user_id', displayName: 'Current_user' },
{field: '' , cellTemplate: "<button ng-click='linking()'>Link-to </button>"}]
getCustomOptions: () ->
return {
showGroupPanel: true
jqueryUIDraggable: true
showSelectionCheckbox: true
showFooter: true
selectWithCheckboxOnly: true
enableColumnResize: true
}
new Tools
This is my asset.js file...I have injected the ProcServiceTools inside my linkCtrl and called the getIndexDynamicColumnDefs function inside this service with data as paramter and it get assigned to $scope.myData and i have also added linking() to the $scope
And this is my
index.html.erb
<div ng-controller='asset.linkCtrl'>
<customgrid columndefs='dynamicColumnDefs' data='myData' dirclass='gridStyleTable' include-search='true' options='customoptions'></customgrid>
In this file i set the data to be myData.I am getting all the datas displayed and button is also getting displayed..My problem is ng-click in the getIndexDynamicCoulmnDefs is not getting triggered when i click the link-to button...
But when i insert a button inside index.html.erb it is triggering the function.See the below code.The inserted button link is triggering the linking().
<div ng-controller='asset.linkCtrl'>
<customgrid columndefs='dynamicColumnDefs' data='myData' dirclass='gridStyleTable' include-search='true' options='customoptions'></customgrid>
<button ng-click="linking()">link</button>
</div>
I dont know the reason why i cant call the function inside the controller from ng-clik in ng-grid.
The problem is because of my user defined customgrid directive which i have included in index.html.erb that has its own private scope..So i used ng-grid itself and got that function triggered...
app = angular.module('asset', []).namespace(true);
app.controller('linkCtrl', ['$scope', 'Restangular', function($scope, Restangular) {
$scope.linking = function() {
console.log("check me out");
};
Restangular.all('asset').customGETLIST("linktogroup", {}).then(function(data) {
$scope.myData = data;
});
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'id', displayName: 'ID' },
{field: 'asset_group_id', displayName: 'Group_ID' },
{field:'asset_catalog_id', displayName:'Catalog_id' },
{field: 'condition', displayName: 'Condition' },
{field: 'notes', displayName: 'Notes' },
{field: 'status', displayName: 'Status' },
{field: 'current_user_id', displayName: 'Current_user' },
{cellTemplate:'<button id="editBtn" type="button" class="btn btn-primary" ng-click="linking()" >Edit</button> '}]};
}
]);
And my index.html.erb
<div ng-controller='asset.linkCtrl'>
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
And got my thing working :)
I am using ng-grid and I am trying to automatically update a single model when data in the grid-table changes. For that I am using the edit module of ng-grid.
This is the code of my controller:
# Define app
app = angular.module("app", ["ng-rails-csrf", "rails", 'ngTagsInput', 'ui.bootstrap', 'ui.grid', 'ui.grid.edit'])
app = angular.module("app")
app.controller "UsersController", ["$scope", "User", ($scope, User)->
$scope.init = ->
User.query({}).then((results)->
console.log results
$scope.gridOptions.data = results
)
$scope.gridOptions =
enableFiltering: true
columnDefs: [
{field: 'id'}
{field: 'email', enableCellEdit: true, type: 'string'}
{field: 'firstName', enableCellEdit: true, type: 'string'}
{field: 'lastName', enableCellEdit: true, type: 'string'}
{field: 'lastName', enableCellEdit: true, type: 'string'}
]
$scope.init()
$scope.$watch 'gridOptions.data', (newValue, oldValue)->
console.log "new value"
console.log newValue
console.log "old value"
console.log oldValue
# FIXME this causes a lot of updates to the remote
, true
]
html:
.users-list
.my-grid ui-grid="gridOptions" ui-grid-edit="ui-grid-edit"
Is there a better way to do it? Like calling an update function whenever one of the model changes?
I'm not sure where you can use angular debounce or how it applies to the model on your grid.
Maybe something like?
<input ng-model="gridOptions.data" ng-model-options="{debounce: {'default': 700} }"/>
With lodash / underscore it looks like.
$scope.$watch('gridOptions.data', _.debounce(function (value) {
$scope.$apply(function(){
...
})
}, 700));
I am new to angular and am trying to make a CRUD app with the ng-grid plugin. I found an example from the web that gets me the info I need, but not a good explanation on how to update the info using a REST route. Here is the code:
var cellEditableTemplate = "";
// Configure ng-grid
$scope.gridOptions = {
data: 'myData',
enableCellEdit: true,
multiSelect: false,
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
{ field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
]
};
// Update Entity on the server side
$scope.updateEntity = function (column, row) {
console.log(row.entity);
console.log(column.field);
// code for saving data to the server...
// row.entity.$update() ... <- the simple case
}
How do I use the following from the example to update my model?
row.entity.$update()
Inject $http into your controller.
Then in your $scope.updateEntity:
$scope.updateEntity = function() {
$http.get('getDataFromServerUrl').success(function(data) {
//update data
$scope.gridOptions.data = data;
}).error(function(err) {
console.log('Error getting data', err);
});
}
and then your data will be updated, as $http activate the $digest cycle.