On load xeditable edit state is enabled and it displays save and cancel button along with that. How can I change so the state is unedit and it shows an edit button in the corresponding row, on click the field will become editable.
How to get save an cancel on when adding new row.
//html code
<div ng-controller="AppSettingsController as appCtrl">
<button type="button" ng-click="addRandomItem()" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add new record
</button>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th class="sortable" st-sort="parameterkey">Parameter Key</th>
<th class="sortable" st-sort="description">Description</th>
<th class="sortable" st-sort="value">Value</th>
<th class="sortable" st-sort="type">Type</th>
<th class="sortable" st-sort="active">Active</th>
<th> Action</th>
</tr>
<tr>
<th colspan="6">
<input st-search="" class="form-control" placeholder="global search ..." type="text" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in appCtrl.users">
<td>
<span editable-text="row.key" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)" e-required>
{{ row.key || 'empty' }}
</span>
</td>
<td >{{row.description}}</td>
<td >{{row.value}}</td>
<td >{{row.type}}</td>
<td >{{row.activeYn}}</td>
<td >
<!-- form -->
<form editable-form shown="true" name="rowform" onbeforesave="appCtrl.saveParam($data, row.paramId)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == param">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
</div>
</td>
</tr>
</tbody>
</table>
<div style="padding-bottom: 10px; padding-left: 5px; padding-right: 5px;">
<button class="btn btn-primary" type="submit" style="float: right; margin-right: 5px;" ng-click="appCtrl.save()">Submit</button>
</div>
</div>
//js code
(function () {
'use strict';
angular.module('app.controllers')
.controller("AppSettingsController", AppSettingsController);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
AppSettingsController.$inject = ['$scope','$http','LookupService','$filter'];
function AppSettingsController($scope,$http,LookupService,$filter){
var vm = this;
vm.users=[];
vm.param={};
$http({
method: 'GET',
url: 'param/getAllAppParam',
}).then(function(resp){
if(resp.data.result != null && resp.data.result != undefined && resp.data.code == 0 && resp.data.result!=false){
vm.users=resp.data.result;
}
else{
vm.successMsg = "";
vm.errorMsg = "Error occured in Server..!User Could not be saved..!";
console.log(vm.errorMsg);
vm.saved = false;
}
});
//copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
// $scope.displayedCollection = [].concat($scope.rowCollection);
//add to the real data holder
$scope.addRandomItem = function addRandomItem() {
$scope.rowCollection.unshift({
/* "paramId": "<input ng-model='row.description'/>",
"value": "",
"activeYn": "",
"description": "",
"type": "",
"query": "",
"key": ""*/
});
};
//remove to the real data holder
$scope.removeItem = function removeItem(row) {
var index = $scope.rowCollection.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
vm.saveParam = function(data, paramId) {
console.log("param Id :"+paramId);
angular.extend(data, {paramId: paramId});
console.log("save :"+ JSON.stringify(data));
//return $http.post('/saveUser', data);
};
vm.save = function(){
$http({
method: 'POST',
url: 'param/saveAppParam',
data: vm.param
}).then(function(resp){
if(resp.data.result != null && resp.data.result != undefined && resp.data.code == 0 && resp.data.result!=false){
vm.errorMsg ="";
/*vm.clear();*/
/*vm.successMsg=resp.data.message + " Registration Id:"+ resp.data.result.regId;*/
vm.saved = true;
}
else{
vm.successMsg = "";
vm.errorMsg = "Error occured in Server..!User Could not be saved..!";
console.log(vm.errorMsg);
vm.saved = false;
}
});
};
}
})();
There are many ways to put the row into an editable state on adding a new row, but I would do it with the appCtrl.users list rather than trying to mess with the x-editable rowform.
pushing a new user into the appCtrl.users array will create a new row. You can add an attribute to the user (.isNew) which could be true when you insert the form and always set to false onafterupdate. Then the shown="row.isNew" should work.
if you can't change your object model, you push the new user into an newUsers array and then use shown="appCtrl.newUsers.indexOf(row)>-1" should work. in onafterupdate, you'll have to remove the user from the array.
UPDATE: as far as I can tell from the code, if you want a new row to be editable when you run the addRandomUser function, the function should look like this:
$scope.addRandomItem = function addRandomItem() {
$scope.inserted = {
"paramId": "<input ng-model='row.description'/>",
"value": "",
"activeYn": "",
"description": "",
"type": "",
"query": "",
"key": ""*/
});
$scope.users.push($scope.inserted)
};
then your html for the rowform should look like:
<form editable-form shown="true" name="rowform"
onbeforesave="appCtrl.saveParam($data, row.paramId)"
ng-show="rowform.$visible" class="form-buttons form-inline"
shown="appCtrl.inserted == row">
<div class="buttons" ng-show="rowform.$visible">
<button type="submit" ng-disabled="rowform.$waiting"
class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting"
ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</div>
<button class="btn btn-primary" ng-show="!rowform.$visible"
ng-click="rowform.$show()">edit</button>
</form>
That should make the row show as editable when you insert a new user. You might need to set inserted={} in your saveUser function, and I haven't looked at your editing functionality yet.
Also, I think you'll need to create an add button to call your addRandomUser function.