jjzjj

javascript - Angular ng-options 在拼接上提供空选择选项

coder 2025-01-20 原文

所以我有一个具有以下标记的 Angular View :

<select id="ddlHandheldIds"
        name="ddlHandheldIds"
        class="form-control"
        ng-model="vm.handheldPayment.handHeldId"
        ng-options="id as id for id in vm.handheldKeys track by id"
        required
        title="select hand held id">
        <option value="">select hand held id</option>
</select>

页面加载时的vm.handheldKeys是一个数组，有两个值[0,24]。

当页面加载时，呈现的 HTML 如下(为便于阅读而标记):

<select id="ddlHandheldIds" name="ddlHandheldIds" 
        class="form-control ng-dirty ng-touched ng-valid-parse ng-valid ng-valid-required" 
        ng-model="vm.handheldPayment.handHeldId" 
        ng-options="id as id for id in vm.handheldKeys track by id"    
        required="" 
        title="select hand held id">
    <option value="" class="">select hand held id</option>
    <option value="0" label="0">0</option>
    <option value="24" label="24">24</option>
</select>

这当然是您所期望的。

现在，通过一些业务逻辑，在用户与页面交互之后，有一个拼接 vm.handheldKeys 数组的函数。因此，假设代码如下所示:

vm.handheldKeys.splice(0,1);  // Remove the '0' from the array

现在，我得到的是以下呈现的 HTML(注意第一个选择选项):

<select id="ddlHandheldIds" name="ddlHandheldIds" 
        class="form-control ng-dirty ng-touched ng-valid-parse ng-valid ng-valid-required" 
        ng-model="vm.handheldPayment.handHeldId" 
        ng-options="id as id for id in vm.handheldKeys track by id"    
        required="" 
        title="select hand held id">
    <option value="? string:0 ?"></option>
    <option value="" class="">select hand held id</option>
    <option value="24" label="24">24</option>
</select>

在不创建附加选项的情况下从数组中删除项目的最佳方法是什么？这是错误吗？

我在 WebStorm 中调试我的 JavaScript，果然，拼接后的数组中只有一项。

谢谢。

更新:

我也尝试添加一个过滤器并将我的选项源设置为过滤器，但我仍然得到相同的结果。

    vm.filteredHandheldKeys = function() {
        var ids = handheldPayments.map(function(pmt) { return pmt.handHeldId; });

        if (!vm.handheldKeys) return;

        return vm.handheldKeys.filter(function(key) {
            return ids.indexOf(key) == -1;
        });
    };

更新 2:

仅供引用，如果我要执行

vm.handheldKeys.splice(1,1);  // Remove the '24' from the array

选择选项现在显示为:

<option value="? string:24 ?"></option>

这可能与选择框所在的表单处于模态中有关？也许模态没有正确重新呈现？

最佳答案

我认为您的代码非常好，所以您再次检查您是否只是按如下方式编写代码:

<select id="ddlHandheldIds" name="ddlHandheldIds"
        class="form-control ng-dirty ng-touched ng-valid-parse ng-valid ng-valid-required"
        ng-model="vm.handheldPayment.handHeldId"
        ng-options="id as id for id in vm.handheldKeys track by id"
        required=""
        title="select hand held id">
        <option value="" class="">select hand held id</option>
      </select>

对于切片，您可以像这样使用您的代码:-

 <input type="button" name="name" value="Splice" ng-click="vm.splice()">

在 vm.splice 函数中你的代码看起来像-

vm.handheldKeys = [0,24];
  vm.splice = function () {
        vm.handheldKeys.splice(0,1);
      }

我在我的机器上检查过，这完全没问题。

“快乐编码”

关于javascript - Angular ng-options 在拼接上提供空选择选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35729387/

接上javascript34codeoptionangularjs

有关javascript - Angular ng-options 在拼接上提供空选择选项的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. 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

  3. 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

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  6. 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

  7. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  8. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  9. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

随机推荐