我使用xeditable然后如何在json中调用http链接 [英] I hav use xeditable then how to call http link in json
问题描述
< h3 > 表格xEditable
< small > 为AngularJS编辑< / small >
< / h3 >
< div ng-controller = TablexEditableController as table class = container-fluid >
<！ - 可编辑行 - >
< h4 class = page-header > 可修改的行< / h4 >
< table < span class =code-attribute> class = table table-bordered table-hover bg-white >
< tr style = font-weight：bold >
< td style = width：35％ > 名称< / td >
< td 样式 = width： 35％ > 日期< / td >
< ; td style < span class =code-keyword> = width：20％ > 状态< / td >
< td style = width：20％ > 组< / td >
< td style = width：25％ > 编辑< / td >
< ; / tr >
< tr ng-repeat = table.users中的用户 > ;
< td >
<！ - 可编辑的用户名（带验证的文字） - >
< span editable-text = user.name 电子名称 = 名称 < span class =code-attribute> 电子表格 = rowform onbeforesave = table.checkName（$ data，user.id） e-required = > {{user.name || &安培;'空安培;者; }} < / span >
< / td >
< td >
<！ - 可编辑的用户名（文字验证） - >
< < span class =code-leadattribute> span editable-text = user.date 电子名称 = date 电子表格 = rowform onbeforesave = table.checkName（$ data，user.id） e-required = > {{user.date || &安培;'空安培;者; }} < / span >
< / td >
< td >
<！ - 可编辑的用户名（带验证的文字） - >
< span editable-text < span class =code-keyword> = user.phone 电子名称 = phone 电子表格 = rowform onbeforesave = table.checkName（$ data，user.id） e-required = > {{user.phone || &安培;'空安培;者; }} < / span >
< / td >
< td >
<！ - 可编辑状态（选择本地） - >
< span editable-select < span class =code-keyword> = user.status 电子名称 = status 电子表格 = rowform e-ng- options = s.value as s.text for s in table.statuses < span class =code-keyword>> {{table.showStatus（user）}} < / span >
< / td >
< td >
<！ - < span class =code-keyword> 可编辑组（select-remote） - >
< span editable-select = user.group 电子名称 = group onshow = table.loadGroups（） 电子表格 = rowform e-ng-options = g.id as g.text for g in table.groups > {{table.showGroup（user）}} < / span >
< / td >
< td 样式 = white-space：nowrap >
<！ - 表格 - >
< 表格 editable-form = 名称 = rowform onbeforesave = table.saveUser（$ data，user.id） ng-show = rowform。$可见 显示 = table.inserted == user class = form-buttons form-inline >
< b utton type = 提交 ng-disabled = rowform。$ waiting title = 保存 class = btn btn -sm btn-info >
< em class = fa fa-save > < / em >
< / button >
< 按钮 type = button ng-disabled = rowform。$ waiting ng-click = rowform。$ cancel（） 标题 = 取消 class = btn btn-sm btn-default >
< em class = fa fa-times > < / em >
< / button >
< / form >
< div ng-show = ！rowform。$ visible class = 按钮 >
< 按钮 ng-click = rowform。$ show（ ） title = 编辑 class = btn btn-sm btn-info >
< em class = fa fa-pencil > < / em >
< /按钮 >
< 按钮 ng-click = table.removeUser（$ index） title = 删除 class = btn btn-sm btn-danger >
< em class = fa fa-trash > < / em > ;
< / button >
< / div >
< / td >
< / tr >
< < span class =code-leadattribute> / table >
< 按钮 ng-click = table.addUser（） class = btn btn-default > 添加行< / button >
<！ - 可编辑列 - >
<！ - 可编辑的表格 - >
< / div > 这篇关于我使用xeditable然后如何在json中调用http链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
<前lang =JavaScript> 功能（）{
< span class =code-string>' use strict';
angular
.module（' app.tables'）
.controller（' TablexEditableController'，TablexEditableController）;
TablexEditableController。$ inject = [' $ filter'，' $ http'，' editableOptions'，' editableThemes'，' $ q'];
function TablexEditableController（$ filter，$ http，editableOptions，editableThemes，$ q）{
var vm = 此;
activate（）;
// //////////////
function activate（）{
// 可编辑行
// - ----------------------------------
vm.users = [
{id： 1 ，name：' awesome user1' ，状态： 2 ，group： 4 ，groupName：' admin'}，
{id： 2 ，name ：' awesome user2'，状态： undefined ，group： 3 ，groupN ame：' vip'}，
{id： 3 ，名称：' awesome user3'，状态： 2 ，组： null }
];
vm.statuses = [
{值： 1 ，text：' status1'}，
{值： 2 ，text：' status2'}，
{value： 3 ，text：' status3'}，
{value： 4 ，text：' status4'}
];
vm.groups = [];
vm.loadGroups = function （）{
return vm.groups.length ？ null ：$ http.get（' server / xeditable- groups.json'）。success（ function （data）{
vm.groups = data;
}）;
};
vm.showGroup = function （用户）{
if （user.group&& vm.groups.length）{
var selected = $ filter（' filter'）（vm.groups，{id：user.group}）;
return selected.length？选择[ 0 ]。text：' 未设置'< /跨度>;
} 其他 {
return user.groupName || ' 未设置';
}
};
vm.showStatus = function （用户）{
var selected = [];
if （user.status）{
selected = $ filter（' < span class =code-string> filter'）（vm.statuses，{value：user.status}）;
}
return selected.length？选择[ 0 ]。text：' 未设置'< /跨度>;
};
vm.checkName = function （data，id）{
if （id === 2 && data！== ' awesome'）{
return ' 用户名2应该是'awesome`';
}
};
vm.saveUser = function （data，id）{
// vm.user尚未更新
angular.extend（data，{id：id}）;
console .log（' 保存用户： ' + id）;
// 返回$ http.post（'/ saveUser'，数据）;
};
// 删除用户
vm.removeUser = function （index）{
vm.users.splice（index， 1 ）;
};
// 添加用户
vm.addUser = function （）{
vm.inserted = {
id：vm.users.length + 1，
name：' '，
状态： null ，
group： null ，
isNew： true
};
vm.users.push（vm.inserted）;
};
// 可编辑列
// ------------------------------ -----
vm.saveColumn = function （列）{
var results = [];
angular.forEach（vm.users， function （ / * user * / ）{
// results.push（$ http。 post（'/ saveColumn'，{column：column，value：user [column]，id：user.id}））;
console .log（' 保存列：' +列）;
}）;
return $ q.all（results）;
};
// 可编辑表格
// ------------------------------ -----
// 过滤用户展示
vm.filterUser = function （user）{
return user.isDeleted ！== true ;
};
// 将用户标记为已删除
vm.deleteUser = function （id）{
var filtered = $ filter（' filter'）（vm.users，{id：id}）;
if （filtered.length）{
filtered [ 0 ]。isDeleted = true ;
}
};
// cancel all changes
vm.cancel = function() {
for (var i = vm.users.length; i--;) {
var user = vm.users[i];
// undelete
if (user.isDeleted) {
delete user.isDeleted;
}
// remove new
if (user.isNew) {
vm.users.splice(i, 1);
}
}
};
// save edits
vm.saveTable = function() {
var results = [];
for (var i = vm.users.length; i--;) {
var user = vm.users[i];
// actually delete user
if (user.isDeleted) {
vm.users.splice(i, 1);
}
// mark as not new
if (user.isNew) {
user.isNew = false;
}
// send on server
// results.push($http.post('/saveUser', user));
console.log('Saving Table...');
}
return $q.all(results);
};
}
}
})();
What I have tried:
all the function is work but i need to call json in http how can i use it can any 1 help me this plzdata, user.id)\"
e-required=\"\">{{ user.name || 'empty' }}</span>
</td>
<td>
<!-- editable username (text with validation)-->
<span editable-text=\"user.date\" e-name=\"date\" e-form=\"rowform\" onbeforesave=\"table.checkName(data, user.id)\"
e-required=\"\">{{ user.date || 'empty' }}</span>
</td>
<td>
<!-- editable username (text with validation)-->
<span editable-text=\"user.phone\" e-name=\"phone\" e-form=\"rowform\" onbeforesave=\"table.checkName(data, user.id)\"
e-required=\"\">{{ user.phone || 'empty' }}</span>
</td>
<td>
<!-- editable status (select-local)-->
<span editable-select=\"user.status\" e-name=\"status\" e-form=\"rowform\" e-ng-options=\"s.value as s.text for s in table.statuses\">{{ table.showStatus(user) }}</span>
</td>
<td>
<!-- editable group (select-remote)-->
<span editable-select=\"user.group\" e-name=\"group\" onshow=\"table.loadGroups()\" e-form=\"rowform\" e-ng-options=\"g.id as g.text for g in table.groups\">{{ table.showGroup(user) }}</span>
</td>
<td style=\"white-space: nowrap\">
<!-- form-->
<form editable-form=\"\" name=\"rowform\" onbeforesave=\"table.saveUser(<h3>Table xEditable
<small>Edit in place for AngularJS</small>
</h3>
<div ng-controller="TablexEditableController as table" class="container-fluid">
<!-- Editable row-->
<h4 class="page-header">Editable row</h4>
<table class="table table-bordered table-hover bg-white">
<tr style="font-weight: bold">
<td style="width:35%">Name</td>
<td style="width:35%">date</td>
<td style="width:20%">Status</td>
<td style="width:20%">Group</td>
<td style="width:25%">Edit</td>
</tr>
<tr ng-repeat="user in table.users">
<td>
<!-- editable username (text with validation)-->
<span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.name || 'empty' }}</span>
</td>
<td>
<!-- editable username (text with validation)-->
<span editable-text="user.date" e-name="date" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.date || 'empty' }}</span>
</td>
<td>
<!-- editable username (text with validation)-->
<span editable-text="user.phone" e-name="phone" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.phone || 'empty' }}</span>
</td>
<td>
<!-- editable status (select-local)-->
<span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in table.statuses">{{ table.showStatus(user) }}</span>
</td>
<td>
<!-- editable group (select-remote)-->
<span editable-select="user.group" e-name="group" onshow="table.loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in table.groups">{{ table.showGroup(user) }}</span>
</td>
<td style="white-space: nowrap">
<!-- form-->
<form editable-form="" name="rowform" onbeforesave="table.saveUser($data, user.id)" ng-show="rowform.$visible" shown="table.inserted == user" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">
<em class="fa fa-save"></em>
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default">
<em class="fa fa-times"></em>
</button>
</form>
<div ng-show="!rowform.$visible" class="buttons">
<button ng-click="rowform.$show()" title="Edit" class="btn btn-sm btn-info">
<em class="fa fa-pencil"></em>
</button>
<button ng-click="table.removeUser($index)" title="Delete" class="btn btn-sm btn-danger">
<em class="fa fa-trash"></em>
</button>
</div>
</td>
</tr>
</table>
<button ng-click="table.addUser()" class="btn btn-default">Add row</button>
<!-- Editable column-->
<!-- Editable table-->
</div>
function() {
'use strict';
angular
.module('app.tables')
.controller('TablexEditableController', TablexEditableController);
TablexEditableController.$inject = ['$filter', '$http', 'editableOptions', 'editableThemes','$q'];
function TablexEditableController($filter, $http, editableOptions, editableThemes, $q) {
var vm = this;
activate();
////////////////
function activate() {
// editable row
// -----------------------------------
vm.users = [
{id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
{id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
{id: 3, name: 'awesome user3', status: 2, group: null}
];
vm.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
vm.groups = [];
vm.loadGroups = function() {
return vm.groups.length ? null : $http.get('server/xeditable-groups.json').success(function(data) {
vm.groups = data;
});
};
vm.showGroup = function(user) {
if(user.group && vm.groups.length) {
var selected = $filter('filter')(vm.groups, {id: user.group});
return selected.length ? selected[0].text : 'Not set';
} else {
return user.groupName || 'Not set';
}
};
vm.showStatus = function(user) {
var selected = [];
if(user.status) {
selected = $filter('filter')(vm.statuses, {value: user.status});
}
return selected.length ? selected[0].text : 'Not set';
};
vm.checkName = function(data, id) {
if (id === 2 && data !== 'awesome') {
return 'Username 2 should be `awesome`';
}
};
vm.saveUser = function(data, id) {
//vm.user not updated yet
angular.extend(data, {id: id});
console.log('Saving user: ' + id);
// return $http.post('/saveUser', data);
};
// remove user
vm.removeUser = function(index) {
vm.users.splice(index, 1);
};
// add user
vm.addUser = function() {
vm.inserted = {
id: vm.users.length+1,
name: '',
status: null,
group: null,
isNew: true
};
vm.users.push(vm.inserted);
};
// editable column
// -----------------------------------
vm.saveColumn = function(column) {
var results = [];
angular.forEach(vm.users, function(/*user*/) {
// results.push($http.post('/saveColumn', {column: column, value: user[column], id: user.id}));
console.log('Saving column: ' + column);
});
return $q.all(results);
};
// editable table
// -----------------------------------
// filter users to show
vm.filterUser = function(user) {
return user.isDeleted !== true;
};
// mark user as deleted
vm.deleteUser = function(id) {
var filtered = $filter('filter')(vm.users, {id: id});
if (filtered.length) {
filtered[0].isDeleted = true;
}
};
// cancel all changes
vm.cancel = function() {
for (var i = vm.users.length; i--;) {
var user = vm.users[i];
// undelete
if (user.isDeleted) {
delete user.isDeleted;
}
// remove new
if (user.isNew) {
vm.users.splice(i, 1);
}
}
};
// save edits
vm.saveTable = function() {
var results = [];
for (var i = vm.users.length; i--;) {
var user = vm.users[i];
// actually delete user
if (user.isDeleted) {
vm.users.splice(i, 1);
}
// mark as not new
if (user.isNew) {
user.isNew = false;
}
// send on server
// results.push($http.post('/saveUser', user));
console.log('Saving Table...');
}
return $q.all(results);
};
}
}
})();
What I have tried:
all the function is work but i need to call json in http how can i use it can any 1 help me this plzdata, user.id)"
e-required="">{{ user.name || 'empty' }}</span>
</td>
<td>
<!-- editable username (text with validation)-->
<span editable-text="user.date" e-name="date" e-form="rowform" onbeforesave="table.checkName(data, user.id)"
e-required="">{{ user.date || 'empty' }}</span>
</td>
<td>
<!-- editable username (text with validation)-->
<span editable-text="user.phone" e-name="phone" e-form="rowform" onbeforesave="table.checkName(data, user.id)"
e-required="">{{ user.phone || 'empty' }}</span>
</td>
<td>
<!-- editable status (select-local)-->
<span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in table.statuses">{{ table.showStatus(user) }}</span>
</td>
<td>
<!-- editable group (select-remote)-->
<span editable-select="user.group" e-name="group" onshow="table.loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in table.groups">{{ table.showGroup(user) }}</span>
</td>
<td style="white-space: nowrap">
<!-- form-->
<form editable-form="" name="rowform" onbeforesave="table.saveUser(
