Question

我正在角色ui-grid中点击编辑按钮进行模态编辑。以下是相同的plunkr。 Plunkr code for row editting 我不知道如何在此模式中插入下拉列表。作为我对这个ui-grid的新手，我尝试了很多东西用于下拉但运气不好。如果有人能帮助我，我将非常感激。

以下是我尝试的代码：

// Code goes here

var app = angular.module('modal.editing', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'schemaForm']);

app.constant('PersonSchema', {
  type: 'object',
  properties: {
    firstName: { type: 'string', title: 'firstName' },
    company: { type: 'string', title: 'Company' },
    lastName: { type: 'string', title: 'lastName' },
     phoneNumber: { type: 'string', title: 'phoneNumber' },
      email: { type: 'string', title: 'email' },

  }
});

app.controller('MainCtrl', MainCtrl);
app.controller('RowEditCtrl', RowEditCtrl);
app.service('RowEditor', RowEditor);

//MainCtrl.$inject = ['RowEditor'];
function MainCtrl (RowEditor) {
  var vm = this;

  vm.editRow = RowEditor.editRow;

  vm.gridOptions = {
    columnDefs: [

      { name: 'firstName' },
      { name: 'company' },
      { name: 'lastName' },
      { name: 'phoneNumber' },
      { name: 'email' },
      { name: '', field: 'id',  cellTemplate: 'edit-button.html', width: 34 }
    ]
  };


 var data = [
    {
        firstName:'kirti',
        company:'Wipro',
        lastName:'gupta',
      phoneNumber:'67777774',
      email:'kirti@gmail.com'
    },
    {
        firstName:'Praveen',
        company:'Philips',
        lastName:'gupta',
      phoneNumber:'5487',
      email:'praveen@gmail.com'
    },
    {
        firstName:'Bhargavi',
        company:'aT&T',
        lastName:'igvjuh',
      phoneNumber:'58475',
      email:'bhargavi@gmail.com'
    }];

      vm.gridOptions.data = data;

}

//RowEditor.$inject = ['$rootScope', '$modal'];
function RowEditor($rootScope, $modal) {
  var service = {};
  service.editRow = editRow;

  function editRow(grid, row) {
    $modal.open({
      templateUrl: 'edit-modal.html',
      controller: ['$modalInstance', 'PersonSchema', 'grid', 'row', RowEditCtrl],
      controllerAs: 'vm',
      resolve: {
        grid: function () { return grid; },
        row: function () { return row; }
      }
    });
  }

  return service;
}

function RowEditCtrl($modalInstance, PersonSchema, grid, row) {
  var vm = this;

  vm.schema = PersonSchema;
  vm.entity = angular.copy(row.entity);
  vm.form = [
    'firstName',
    'lastName',
    'phoneNumber',
  ];

  vm.save = save;

  function save() {
    // Copy row values over
    row.entity = angular.extend(row.entity, vm.entity);
    $modalInstance.close(row.entity);
  }
}

编辑modal.html：

<div class="ui-grid-cell-contents">
  <button type="button" class="btn btn-xs btn-primary" ng-click="grid.appScope.vm.editRow(grid, row)">
    <i class="fa fa-edit"></i>
  </button>
</div>

Answer 1

这与ui-grid的工作方式无关，而与schemaform.io的工作方式无关。

更确切地说，您应该在type对象中添加select属性设置为vm.form的对象：

{
  "key": "companySelect",
  "type": "select",
  "title": "Company Select",
  "titleMap": {
    "a": "A",
    "b": "B",
    "c": "C"
}

显然，您应该根据需要创建titleMap属性。

我修改了您的plunkr以包含此内容。

您可以在its website找到有关在schemaform.io中选择的更多信息。

顺便说一下，没有了解架构，我得说我觉得很酷！谢谢！

如何在角度ui-grid中给出模态rowEditor的下拉列表？

1 个答案: