vm.getAllLeave = function () {
leavetypeservice.getAllLeave()
.success(function (leaveTypeView) {
debugger;
vm.gridOptions.data = leaveTypeView;
//vm.leaveTypeView = leaveTypeView;
})
};
vm.gridOptions = {
columnDefs: [
{ field: 'name', name: 'Name' }, { field: 'applicableForName', name: 'Applicable For' }]
};
vm.getAllLeave();
}
leavetypecontroller.$inject = ["leavetypeservice", "$location", "$http"];
angular.module('myapp').controller('leavetypecontroller', leavetypecontroller)
leaveTypeView is the response. To get the data (assuming JSON) you need vm.gridOptions.data = leaveTypeView.data
The error you're getting is UI grid attempting to parse a non JSON element.
Related
I am trying to plot a graph with Hightchart, my data comes from an REST web service.
I am using angularjs (1.5) to get the data.
my Service look like :
app.factory('ServicesImpl', function($http){
var obj = {};
obj.getData = function(){
return $http.get('http://localhost:8080/chartDepense/');
};
return obj;
});
my controller is :
app.controller('myController', function ($scope, $rootScope, ServicesImpl) {
$scope.chart = ServicesImpl.getData().then(function(r){
return r.data;
});
console.log($scope.chart);
$scope.chartOptions = {
title: {
text: $scope.chart.libelle
},
xAxis: {
categories: $scope.chart.categories ,
title: {
text: 'les X'
}
},
yAxis: {
title: {
text: 'les Y'
}
},
series: [{
data: $scope.chart.peroides
}]
};
});
and I got this :
I don't know can I can get my data in my controller to put in chartConfig?
Need help to make changes in Angular Factory. Have example working with array JSON data, but need this code work with JSON data from $http request, how do that?
This is example Factory:
angular.module('starter.services', [])
.factory('catgs', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var catgs = [{
id: 0,
name: 'CATG1',
items: [{
img:'img/G1I1.png',
name:'category1Item1',
status:'OPEN'
}]
},{
id: 1,
name: 'CATG2',
items: [{
img:'img/G2I1.png',
name:'category2Item1',
status:'OPEN'
},{
img:'img/G2I2.png',
name:'category2Item2',
status:'CLOSED'
}]
}];
return {
all: function() {
return catgs;
},
remove: function(catg) {
catgs.splice(catgs.indexOf(catg), 1);
},
get: function(catgId) {
for (var i = 0; i < catgs.length; i++) {
if (catgs[i].id === parseInt(catgId)) {
return catgs[i];
}
}
return null;
}
};
});
Need help to replace catgs JSON data to $http request, for example musite.com/jsondata.json
//try this
$http.get('your api url or .json').then(function(result){
$scope.jsonData = result.data;
}, function(err) {
console.log(err);
});
Hi i am developing a small application using Angularjs and Ui-grid. On one of the page i am showing all the rows from one table into the Ui-grid. In the last column of the grid i am keeping a delete button to delete the row.
Here is the code for data binding
scope.loadGrid = function()
var http = $resource(baseURL + '/api/AllInvoices', {/* No paramter */},
{'get' : {method : 'GET', isArray : true, cache : false,
timeout : 500, showSpinner : true}});
$scope.gridOptions = {enableColumnMenus: false};
$scope.gridOptions.columnDefs = [
{ name: '', field: 'Check', cellTemplate: '<md-checkbox aria-label="Checkbox 1"></md-checkbox>'},
{ field: 'InvoiceNumber', cellClass: 'address' },
{ name: 'Date', field: 'InvoiceDate'},
{ field: 'Status'},
{ field: 'Amount' },
{ name: 'Location From', field: 'LocationFrom'},
{ name: 'Location To', field: 'LocationTo'},
{ field: 'Action', cellTemplate: '<img src="svg/delete.png" alt="Description" ng-click="grid.appScope.Delete(row)"/>'},
];
http.get().$promise.then(function (data) {
$scope.gridOptions.data = data;
}, function (reason) {
alert (reason);
});
}
Delete method
$scope.Delete = function(row) {
var index = $scope.gridOptions.data.indexOf(row.entity);
$scope.gridOptions.data.splice(index, 1);
};
Can someone suggest how i can get the unique value from each row and pass the value to delete web api call.
Had to do this the hard way. Not a thing in documentation. I am using vm as controller so my row button click is
ng-click="grid.appScope.vm.confirmDelete(row)"
Then in the controller register gridApi
onRegisterApi: function (api) {
gridApi = api;
}
And then I had to find a way to ma
vm.confirmDelete = function (row) {
var orgID = 0;
for (var i = 0; i < gridApi.grid.rows.length; i++){
for (var j = 0; j < row.grid.rows.length; j++){
if (gridApi.grid.rows[i].GridRow == row.grid.rows[j].GridRow) {
orgID = row.entity.neighborhoodOrganizationID;
}
}
}
var data = $.param({ id: orgID});
I have a ui-select field
{
key: 'data_id',
type: 'ui-select',
templateOptions: {
required: true,
label: 'Select label',
options: [],
valueProp: 'id',
labelProp: 'name'
},
controller: function($scope, DataService) {
DataService.getSelectData().then(function(response) {
$scope.to.options = response.data;
});
}
}
How can I access that inner controller in my unit tests and check that data loading for the select field actually works ?
UPDATE:
An example of a test could be as such:
var initializePageController = function() {
return $controller('PageCtrl', {
'$state': $state,
'$stateParams': $stateParams
});
};
var initializeSelectController = function(selectElement) {
return $controller(selectElement.controller, {
'$scope': $scope
});
};
Then test case looks like:
it('should be able to get list of data....', function() {
$scope.to = {};
var vm = initializePageController();
$httpBackend.expectGET(/\/api\/v1\/data...../).respond([
{id: 1, name: 'Data 1'},
{id: 2, name: 'Data 2'}
]);
initializeSelectController(vm.fields[1]);
$httpBackend.flush();
expect($scope.to.options.length).to.equal(2);
});
You could do it a few ways. One option would be to test the controller that contains this configuration. So, if you have the field configuration set to $scope.fields like so:
$scope.fields = [ { /* your field config you have above */ } ];
Then in your test you could do something like:
$controller($scope.fields[0].controller, { mockScope, mockDataService });
Then do your assertions.
I recently wrote some test for a type that uses ui-select. I actually create a formly-form and then run the tests there. I use the following helpers
function compileFormlyForm(){
var html = '<formly-form model="model" fields="fields"></formly-form>';
var element = compile(html)(scope, function (clonedElement) {
sandboxEl.html(clonedElement);
});
scope.$digest();
timeout.flush();
return element;
}
function getSelectController(fieldElement){
return fieldElement.find('.ui-select-container').controller('uiSelect');
}
function getSelectMultipleController(fieldElement){
return fieldElement.find('.ui-select-container').scope().$selectMultiple;
}
function triggerEntry(selectController, inputStr) {
selectController.search = inputStr;
scope.$digest();
try {
timeout.flush();
} catch(exception){
// there is no way to flush and not throw errors if there is nothing to flush.
}
}
// accepts either an element or a select controller
function triggerShowOptions(select){
var selectController = select;
if(angular.isElement(select)){
selectController = getSelectController(select);
}
selectController.activate();
scope.$digest();
}
An example of one of the tests
it('should call typeaheadMethod when the input value changes', function(){
scope.fields = [
{
key: 'selectOneThing',
type: 'singleSelect'
},
{
key: 'selectManyThings',
type: 'multipleSelect'
}
];
scope.model = {};
var formlyForm = compileFormlyForm();
var selects = formlyForm.find('.formly-field');
var singleSelectCtrl = getSelectController(selects.eq(0));
triggerEntry(singleSelectCtrl, 'woo');
expect(selectResourceManagerMock.searchAll.calls.count()).toEqual(1);
var multiSelectCtrl = getSelectController(selects.eq(1));
triggerEntry(multiSelectCtrl, 'woo');
expect(selectResourceManagerMock.searchAll.calls.count()).toEqual(2);
});
I have the following on an angular controller:
$scope.emailsConfig = {
valueField: 'email',
labelField: 'name',
options: [{email: 'brian#dn.cm', name: 'Brian'},
{email: 'nikola#tl.com', name: 'Nikola'}],
}
Then I have the following:
<select selectize="emailsConfig" ng-model="emails"></select>
This works fine ... But then I changed options to:
options: UserService.GetEmails()
This does not work. When I logged options and get:
{"Emails":[{email: 'brian#dn.cm', name: 'Brian'}, {email: 'nikola#tl.com', name: 'Nikola'}]}
How can I get the values that are in Emails?
I tried UserService.GetEmails().Emails but somehow get undefined
UPDATE
UserService.GetEmails() is the following:
application.service('UserService', function ($http) {
return {
GetEmails: function () {
return $http.get('api/users/emails');
}
}
}
The service is returning the promise that $http returns. You still need to add the callback that returns the data. Can use success() or then()
Try this:
UserService.GetEmails().success(function(resp){
$scope.emailsConfig = {
valueField: 'email',
labelField: 'name',
options: resp.Emails
}
}).error(function(){
alert('Ooops')
});
to move more of this into the service and out of the controller you could do something like:
application.service('UserService', function ($http) {
return {
GetEmails: function (callback) {
$http.get('api/users/emails').success(function (resp) {
var config = {
valueField: 'email',
labelField: 'name',
options: resp.Emails
}
callback(config);
}).error(function () {
alert('Oooops');
});
}
}
}
then in controller
UserService.GetEmails(function(emailsConfig){
$scope.emailsConfig = emailsConfig;
})