how to edit column in value in angular js?

问题

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}
       ]
   }

回答1:

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.

来源：https://stackoverflow.com/questions/34612856/how-to-edit-column-in-value-in-angular-js

标签

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat

ng-grid