草庐IT

javascript - 在 ui-grid editableCellTemplate [ng-grid 3.x] 中使用 ng-option 下拉菜单

coder 2024-07-18 原文

我正在使用 ng-grid 的新 3.0 版本 ui-grid 在我的应用程序中制作网格。我想要做的是将我表格中的一个可编辑单元格设为 ng-options下拉列表中填充了使用 Angular 工厂检索的数据。

我正在尝试使用 editableCellTemplate 来做到这一点ui-grid 的特性。

下面是一些示例代码:

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

Controller :

$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    enableCellEditOnFocus: true,
    columnDefs: [
      { field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      },
      { field: 'gender', editType: 'dropdown', enableCellEdit: true,
          editableCellTemplate: 'temp.html' },
      { field: 'company', enableSorting: false }
]};

temp.html:

<div>
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

这是一个plunker与代码。 [注意:这只是示例代码。 ng-options 的数组是从实际代码中的 Angular 工厂中提取的，而不是在范围内声明的。 editDropdownOptionsArray 可能无法工作，因为数据是动态的。]

是否可以用 ui-grid 做到这一点？我认为这可能是范围问题，因为如果我将 ng-option 代码放在我的 HTML 页面中，它会按预期工作，但我可以从 ui-grid 文档中收集到的是 temp.html 文件应该在范围内.我知道这些东西仍处于不稳定版本中，但我们将不胜感激任何对此问题的帮助!

**2015 年 3 月 31 日更新:**

如果您正在尝试此解决方案但它不起作用，请注意。一月份，外部范围的代码从 getExternalScopes() 重构为 grid.addScope.source。 https://github.com/angular-ui/ng-grid/issues/1379

这是使用新代码更新后的 plunkr:Click Me!

最佳答案

您需要在 3.x 版本的 ui-grid 中使用 external-scopes 功能。您无法在选择下拉列表中获得任何选项的原因是因为 ui-grid 现在使用一个独立的范围，这将不允许您在单元格中直接访问应用程序范围变量。

我能够通过以下步骤让您的 plunkr 工作 - 请参阅 updated plunkr

步骤:

1) 在 index.html 中，在网格 div 中指定 external-scopes 属性，即修改

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

到

<div ui-grid="gridOptions" ui-grid-edit class="grid" external-scopes="myExternalScope"></div>

2) 在 app.js 中，将范围分配给我们的外部范围属性，即添加以下行:

$scope.myExternalScope = $scope;

3) 在 temp.html 中，使用 getExternalScopes() 访问 genderTypes 数组，即修改 editableCellTemplate 的值

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType">

到

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes">

额外的想法:

1) 我没有找到适合我需要的 ui-grid/dropdownEditor - 因此，还没有尝试过。

2) 您还可以添加 cellTemplate 以及 editableCellTemplate。您可以为两者分配相同的值。

引用资料:

  1. http://ui-grid.info/docs/#/tutorial/305_externalScopes

关于javascript - 在 ui-grid editableCellTemplate [ng-grid 3.x] 中使用 ng-option 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26245495/

editableCellTemplategridstrongui-gridjavascriptangularjsng-gridangular-ui-grid

有关javascript - 在 ui-grid editableCellTemplate [ng-grid 3.x] 中使用 ng-option 下拉菜单的更多相关文章

  1. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  2. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  3. ruby-on-rails - 缺失区域；使用 :region option or export region name to ENV ['AWS_REGION' ] - 2

    我知道还有其他相同的问题，但他们没有解决我的问题。我不断收到错误:Aws::Errors::MissingRegionErrorinBooksController#create,缺少区域；使用:region选项或将区域名称导出到ENV['AWS_REGION']。但是，这是我的配置开发.rb:config.paperclip_defaults={storage::s3,s3_host_name:"s3-us-west-2.amazonaws.com",s3_credentials:{bucket:ENV['AWS_BUCKET'],access_key_id:ENV['AWS_ACCE

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 是否可以让 ActiveRecord 为使用 :joins option? 加载的行创建对象 - 2

    我需要做这样的事情classUser'User',:foreign_key=>'abuser_id'belongs_to:gameendclassGame['JOINabuse_reportsONusers.id=abuse_reports.abuser_id','JOINgamesONgames.id=abuse_reports.game_id'],:group=>'users.id',:select=>'users.*,count(distinctgames.id)ASgame_count,count(abuse_reports.id)asabuse_report_count',:

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - ruby open ssl api for encrypted key (without nodes option) - 2

    在安装了openssllib的linux机器上，当您执行带有“-nodes”选项的“opensslpkcs12”时，您将获得带有未加密私钥的输出，但如果您跳过–nodes选项，则输出将具有加密的私钥。e.g.opensslpkcs12-intest.pfx-outtest.pem你应该看到像下面这样加密的私钥-----BEGINENCRYPTEDPRIVATEKEY-----MIIFDjBABgkqhkiGG7s=-----ENDENCRYPTEDPRIVATEKEY-----如何使用ruby​​的开放ssl库实现上述目标？这就是我用ruby​​生成私钥的方式:@private_key

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐