如何在angular js中编辑值中的列? [英] how to edit column in value in angular js?
本文介绍了如何在angular js中编辑值中的列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的例子中使用了 UI-grid.我从这里看到了 edit row 的文档.http://ui-grid.info/docs/#/tutorial/205_row_editable在给定的示例中，用户能够编辑行中存在的列.我还制作了相同的示例，也包括模块，但无法编辑我的列..编辑列的程序是什么?
这是我的代码http://plnkr.co/edit/zypDrZeJUx9ZoTHNnMxc?p=preview
已经添加模块
angular.module('app',['ngTouch', 'ui.grid', 'ui.grid.selection','ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.cellNav'])这是我的 JS 文件
$scope.gridOptions = {//过滤演示//启用过滤:真，//showHeader: false,//显示标题检查enableRowSelection: 真，多选:假，//是否在每行前面显示复选框enableRowHeaderSelection: 假，onRegisterApi:函数(gridApi){//在作用域上设置gridApi$scope.gridApi = gridApi;gridApi.selection.on.rowSelectionChanged($scope,function(row){var msg = '行选择' + row.entity.age;控制台日志(行)；});},启用过滤:真，列定义:[{字段:'性别'，displayName:'性别',筛选: {类型:uiGridConstants.filter.SELECT，选择选项:[{值:'m'，标签:'男'}，{值:'F'，标签:'女性'}，{ 值:'N'，标签:'mdd' }]},},{field: 'name', displayName:'First'},{field: 'lastname', displayName:'Second',enableSorting: false}]} 解决方案
看看演示，我希望这是你想要的.
它不再与您的完全相同，但您仍然可以编辑代码.
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',功能($scope，$http，$q，$interval，uiGridConstants){$scope.data = [{名称:'abc',姓氏:'hrt',性别:'m',年龄:28}, {名称:'pqr',姓氏:'oiu',性别:'F',年龄:8}, {name: 'lqm',姓氏:'ytu',性别:'N',年龄:11}];$scope.gridOptions = {启用过滤:真，enableRowSelection: 真，多选:假，enableRowHeaderSelection: false};$scope.gridOptions.columnDefs = [{name: '性别',displayName: '性别',筛选: {类型:uiGridConstants.filter.SELECT，选择选项:[{值:'m'，标签:‘男’}, {值:'F'，标签:‘女’}, {值:'N'，标签:'mdd'}]}}, {name: '名字',显示名称:'第一个'}, {name: '姓氏',显示名称:'第二'}];$scope.saveRow = 函数(rowEntity){//创建一个虚假的承诺 - 通常你会使用 $http 或 $resource 返回的承诺var promise = $q.defer();$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise);承诺.resolve();};$scope.gridOptions.onRegisterApi = 函数(gridApi){//在作用域上设置gridApi$scope.gridApi = gridApi;gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);gridApi.selection.on.rowSelectionChanged($scope, function(row) {var msg = '行选择' + row.entity.age;控制台日志(行)；});};$scope.gridOptions.data = $scope.data;}]);<html ng-app="app"><头><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"><身体><div ng-controller="MainCtrl"><div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-selection class="grid"></div><script src="app.js"></script>
