如何在加载时禁用 angular-xeditable 编辑状态
how to make on load angular-xeditable edit state disabled
加载 xeditable 编辑状态时启用，并显示保存和取消按钮。
我怎样才能更改为未编辑状态，并在相应行中显示一个编辑按钮，单击该字段将变为可编辑状态。
添加新行时如何保存取消。
//html代码
<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代码
(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;
}
});
};
}
})();
有很多方法可以在添加新行时将行置于可编辑状态，但我会使用 appCtrl.users 列表而不是试图弄乱 x-editable rowform。
将新用户推入 appCtrl.users 数组将创建一个新行。您可以向用户添加一个属性 (.isNew)，当您插入表单时该属性可能为 true，并且在更新后始终设置为 false。然后 shown="row.isNew" 应该工作。
如果你不能改变你的对象模型，你将新用户推入一个 newUsers 数组，然后使用 shown="appCtrl.newUsers.indexOf(row)>-1" 应该可以。在 onafterupdate 中，您必须从数组中删除用户。
更新：据我从代码中得知，如果您希望在 运行 addRandomUser 函数时可以编辑新行，该函数应如下所示：
$scope.addRandomItem = function addRandomItem() {
$scope.inserted = {
"paramId": "<input ng-model='row.description'/>",
"value": "",
"activeYn": "",
"description": "",
"type": "",
"query": "",
"key": ""*/
});
$scope.users.push($scope.inserted)
};
那么你的 html 行表格应该如下所示：
<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>
当您插入新用户时，这应该会使该行显示为可编辑。您可能需要在 saveUser 函数中设置 inserted={}，我还没有查看您的编辑功能。
此外，我认为您需要创建一个添加按钮来调用您的 addRandomUser 函数。
加载 xeditable 编辑状态时启用，并显示保存和取消按钮。 我怎样才能更改为未编辑状态，并在相应行中显示一个编辑按钮，单击该字段将变为可编辑状态。
添加新行时如何保存取消。
//html代码
<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代码
(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;
}
});
};
}
})();
有很多方法可以在添加新行时将行置于可编辑状态，但我会使用 appCtrl.users 列表而不是试图弄乱 x-editable rowform。
将新用户推入 appCtrl.users 数组将创建一个新行。您可以向用户添加一个属性 (.isNew)，当您插入表单时该属性可能为 true，并且在更新后始终设置为 false。然后 shown="row.isNew" 应该工作。
如果你不能改变你的对象模型，你将新用户推入一个 newUsers 数组，然后使用 shown="appCtrl.newUsers.indexOf(row)>-1" 应该可以。在 onafterupdate 中，您必须从数组中删除用户。
更新：据我从代码中得知，如果您希望在 运行 addRandomUser 函数时可以编辑新行，该函数应如下所示：
$scope.addRandomItem = function addRandomItem() {
$scope.inserted = {
"paramId": "<input ng-model='row.description'/>",
"value": "",
"activeYn": "",
"description": "",
"type": "",
"query": "",
"key": ""*/
});
$scope.users.push($scope.inserted)
};
那么你的 html 行表格应该如下所示：
<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>
当您插入新用户时，这应该会使该行显示为可编辑。您可能需要在 saveUser 函数中设置 inserted={}，我还没有查看您的编辑功能。
此外，我认为您需要创建一个添加按钮来调用您的 addRandomUser 函数。