Sto lavorando a una piccola applicazione di frontend che mostrerà i vari dati di spedizione del prodotto in una griglia utente.
Ho il codice seguente:
HTML:
<body ng-controller="MyCtrl">
<p ng-repeat="row in myData">{{row.name}} works at {{row.company}}</p>
<button type="button" class="btn btn-success" ng-click="getCurrentFocus()">Get Current focused cell</button> <span ng-bind="currentFocused"></span>
<br/>
<br/>
<div id="grid1" ui-grid="gridOptions" external-scopes="editRows" ui-grid-edit ui-grid-row-edit ui-grid-pinning ui-grid-paging ui-grid-cellnav class="grid"></div>
</body>
AngularJS:
var app = angular.module('webapps', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.pinning', 'ui.grid.paging', 'ui.grid.cellNav']);
app.controller('MyCtrl', ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
//Column definitions
$scope.columns = [
{ field: 'name', displayName: 'First Name', width: 300},
{ field: 'lastname', displayName: 'Last Name', width: 300 },
{ field: 'email', displayName: 'Email', width: 300 },
{ field: 'company', displayName: 'Company', width: '50%' }
];
//Options for displaying the grid
$scope.gridOptions = {
data: 'myData',
enableCellEditOnFocus: false,
pagingPageSizes: [2, 5, 7],
pagingPageSize: 5,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
//var cellTemplate = '<button class="btn primary" ng-click="getExternalScopes().showMe(rowCol.row.entity)">Edit</button>'; //'ui-grid/selectionRowHeader'; // you could use your own template here
//$scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', width: 50, pinnedLeft: true, cellTemplate: cellTemplate });
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
// Save row data on edit 1 - TESTING
$scope.saveRow = function (rowEntity) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
var promise = $http.post("Webapps/Home/SaveRow");
$scope.gridApi.rowEdit.setSavePromise($scope.gridApi.grid, rowEntity, promise.promise);
console.log(rowEntity);
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval(function() {
if (rowEntity.lastname === ' ') {
promise.reject();
} else {
promise.resolve();
}
}, 3000, 1);
};
}]); // End of MyCtrl
La mia domanda è per quanto riguarda il metodo $ scope.saveRow. Ho esaminato la documentazione here e ho provato a cercare su google (non molto per l'interfaccia utente) ma sto ancora colpendo un vicolo cieco dato che sono un po 'inesperto e non sono sicuro di come codificare questo correttamente con le promesse.
Ci sarà dietro un'app MVC che gestirà il push dei dati sul front-end e il salvataggio delle modifiche della tabella su un db SQLServer. Ovviamente quello che mi piacerebbe fare è che questa funzione $ scope.saveRow invii correttamente i dati rowEnttiy alla mia app MVC ma, di nuovo, non riesco a capire come codificare la funzione. Le promesse "false" incluse nell'esempio non mi bastano per capire cosa devo fare, a quanto pare. Inizialmente ho provato quanto segue:
$scope.saveRow = function (rowEntity) {
try {
// Need actual URL for post...controller has to accept 'row'
$http.post("Webapps/Home/SaveRow", { row: rowEntity }).success(function (data, status, headers, config) {
console.log("post success");
console.log(rowEntity);
}).error(function (data, status, headers, config) {
console.log("post failure");
console.log(rowEntity);
});
} catch (e) {
alert("Something went wrong");
}
};
ma questo getta solo un'eccezione nella mia console che una promessa non è stato restituito quando l'evento saveRow viene generato.
Per qualche motivo la parte '$ scope.gridApi.grid' del metodo' setSavePromise' manca nella documentazione, quindi grazie per aver postato questo. Ho battuto la testa contro un muro per oltre un'ora cercando di farlo funzionare. – Samsquanch
Non c'è motivo di creare una nuova promessa. Ritorna semplicemente la promessa che $ http fornisce – codemonkey
Giusto per chiarire, il commento di @ codemonkey si riferiva a una versione precedente di questa risposta che ora è stata corretta. Grazie a @codemonkey! –