如何在角JS值编辑列？ [英] how to edit column in value in angular js?
本文介绍了如何在角JS值编辑列？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的UI格在我的例子。我看到的文档从这里编辑行。
http://ui-grid.info/docs/#/tutorial/205_row_editable
在能够编辑栏给出的示例用户美元row.I p $ psent也使同样的例子还包括模块，但不能编辑我的专栏..what是步骤编辑列？
这是我的code
http://plnkr.co/edit/zypDrZeJUx9ZoTHNnMxc?p=$p$pview
已经添加模块
angular.module（'应用'，['ngTouch'，'ui.grid'，'ui.grid.selection'，'ui.grid.edit'，'UI。 grid.rowEdit'，'ui.grid.cellNav']）
这是我的JS文件
$ scope.gridOptions = {
//过滤器演示
// enableFiltering：真实，
// showHeader：假的，//显示表头检查
enableRowSelection：真实，
多选：假的，
每一行//显示复选框前面与否
enableRowHeaderSelection：假的，
onRegisterApi：功能（gridApi）{
关于范围//设置gridApi
$ scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged（$范围，功能（行）{
VAR味精=行选择'+ row.entity.age;
的console.log（行）;
}）;
}， enableFiltering：真实，
columnDefs：
{
现场：社会性别，
显示名：社会性别，
过滤：{
类型：uiGridConstants.filter.SELECT，
selectOptions：
{值：M的标签：男性}，
{值：'F'，标签：'女'}，
{值：N，标签：MDD'} ]
}，
}， {字段：名称，显示名：首先'}，
{场：'姓'，显示名：'二'，enableSorting：假}
]
}
解决方案
看看演示，我希望这是你想要的。
这是不完全一样的你了，但你仍然可以编辑code。
\r
\r\r
\r VAR应用= angular.module（'应用'，['ngTouch'，' ui.grid'，'ui.grid.edit'，'ui.grid.rowEdit'，'ui.grid.selection']）;\r
\r
\r
app.controller（'MainCtrl'，['$范围，$ HTTP，$ Q'，'$间隔，uiGridConstants'，\r
功能（$范围，$ HTTP，$ Q $间隔，uiGridConstants）{\r
$ scope.data = [{\r
名称：'ABC'，\r
名字：'HRT'，\r
性别：'M'，\r
年龄：28\r
\r
}，{\r
名称：PQR，\r
名字：'OIU'，\r
性别：'F'，\r
年龄：8\r
\r
}，{\r
名称：'LQM'，\r
名字：'YTU'，\r
性别：'N'，\r
年龄：11\r
\r
}];\r
\r
$ scope.gridOptions = {\r
enableFiltering：真实，\r
enableRowSelection：真实，\r
多选：假的，\r
enableRowHeaderSelection：假的\r
};\r
\r
$ scope.gridOptions.columnDefs = [{\r
名称：社会性别，\r
显示名：社会性别，\r
过滤：{\r
类型：uiGridConstants.filter.SELECT，\r
selectOptions：[{\r
值：M\r
标签：男性\r
}，{\r
值：'F'，\r
标签：'女'\r
}，{\r
值：'N'，\r
标签：MDD\r
}\r
\r
]\r
}\r
}，{\r
名称：'名'，\r
显示名：第一\r
}，{\r
名称：'姓'，\r
显示名：'二'\r
}];\r
\r
$ scope.saveRow =功能（rowEntity）{\r
//创建一个假的诺言 - 通常你会使用由$ http或$资源返回的承诺\r
VAR承诺= $ q.defer（）;\r
$ scope.gridApi.rowEdit.setSavePromise（rowEntity，promise.promise）;\r
\r
promise.resolve（）;\r
};\r
\r
$ scope.gridOptions.onRegisterApi =功能（gridApi）{\r
关于范围//设置gridApi\r
$ scope.gridApi = gridApi;\r
gridApi.rowEdit.on.saveRow（$范围，$ scope.saveRow）;\r
\r
gridApi.selection.on.rowSelectionChanged（$范围，功能（行）{\r
VAR味精=行选择'+ row.entity.age;\r
的console.log（行）;\r
}）;\r
};\r
\r
$ scope.gridOptions.data = $ scope.data;\r
}\r
]）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/docs/grunt-scripts/csv.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/docs/grunt-scripts/pdfmake.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/release/ui-grid.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接rel =stylesheet属性HREF =http://ui-grid.info/release/ui-grid.css类型=文/ CSS＆GT;\r
＆LT;链接rel =stylesheet属性HREF =的main.css类型=文/ CSS＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
\r
＆LT; DIV NG控制器=MainCtrl＆GT;\r
＆LT;格UI格=gridOptionsUI网编辑UI格列编辑UI格选择类=网格＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
\r
\r
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
有关任何进一步的问题，你总是受欢迎的。
这里是一个 Plunker 。
I am using UI-grid in my example .I saw the documentation from here of edit row . http://ui-grid.info/docs/#/tutorial/205_row_editable In given example user able to edit the columns present in row.I also make same example also include modules but not able to edit my columns ..what is procedure to edit the columns ?
here is my code http://plnkr.co/edit/zypDrZeJUx9ZoTHNnMxc?p=preview
already added the modules
angular.module('app',['ngTouch', 'ui.grid', 'ui.grid.selection' ,'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav'])
here is my JS file
$scope.gridOptions = {
//filter demo
// enableFiltering: true,
// showHeader: false, // show header check
enableRowSelection: true,
multiSelect:false,
//show checkbox front of each row or not
enableRowHeaderSelection: false,
onRegisterApi : function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
var msg = 'row selected ' + row.entity.age;
console.log(row);
});
},
enableFiltering: true,
columnDefs: [
{
field: 'gender',
displayName:'Gender',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' },
{ value: 'N', label: 'mdd' }
]
},
},
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second',enableSorting: false}
]
}
解决方案
Take a look at the demo, I hope this is what you wanted.
It's not exactly the same as yours anymore but you can still edit the code.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.selection']);
app.controller('MainCtrl', ['$scope', '$http', '$q', '$interval', 'uiGridConstants',
function($scope, $http, $q, $interval, uiGridConstants) {
$scope.data = [{
name: 'abc',
lastname: 'hrt',
gender: 'm',
age: 28
}, {
name: 'pqr',
lastname: 'oiu',
gender: 'F',
age: 8
}, {
name: 'lqm',
lastname: 'ytu',
gender: 'N',
age: 11
}];
$scope.gridOptions = {
enableFiltering: true,
enableRowSelection: true,
multiSelect: false,
enableRowHeaderSelection: false
};
$scope.gridOptions.columnDefs = [{
name: 'gender',
displayName: 'Gender',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [{
value: 'm',
label: 'male'
}, {
value: 'F',
label: 'female'
}, {
value: 'N',
label: 'mdd'
}
]
}
}, {
name: 'name',
displayName: 'First'
}, {
name: 'lastname',
displayName: 'Second'
}];
$scope.saveRow = function(rowEntity) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);
promise.resolve();
};
$scope.gridOptions.onRegisterApi = function(gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var msg = 'row selected ' + row.entity.age;
console.log(row);
});
};
$scope.gridOptions.data = $scope.data;
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-selection class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
For any further questions you're always welcome. Here is a Plunker.
这篇关于如何在角JS值编辑列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
