草庐IT

javascript - 在 AngularJS 中取消选择 ng-options 下拉菜单

coder 2025-02-03 原文

我使用 ng-options 创建了一个选择下拉列表，用于过滤页面上的列表。当页面加载时，下拉列表是空白的，没有发生过滤。

当我选择一个选项时，过滤会正常进行，但空白选项会消失，因此我必须拥有一个部门过滤版本的列表，除非我刷新页面并重新开始:

之前:

之后:

这是我的代码:

.html 文件:

         Department:
        <select ng-model="search.SubDepartmentID" ng-options="d.SubDepartmentID as d.DepartmentLabel for d in DepartmentList"></select>
        
        <br />
        <div class="span10">
            <!--Body content-->

            <ul>
                <li ng-repeat="(index,e) in filteredEmployees | filter:search | orderBy:orderProp | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize"
                    class="thumbnail employee-listing">
                    <a href="#/Employee/{{e.EmployeeID}}" class="thumb">
                        <img style="height: 100px; width: auto;" ng-src="../Images/CurrentEmployees/{{e.ImageName}}"></a>
                    <p><a href="#/Employee/{{e.EmployeeID}}">{{e.FullName}}</a></p>
                    <p>{{e.Department}}</p>
                </li>
            </ul>

我希望能够将它返回到空白选项，以便我有一个完全未过滤的列表。执行 value=""选项或完全为空是行不通的，因为它是基于值进行过滤，没有任何内容与空值匹配。

如有任何帮助或指导，我们将不胜感激!

最佳答案

感谢大家的回复，我混合了一些您的回复，添加到 watch 中并实现了我想要的，这是我最终得到的:

<select ng-model="search.SubDepartmentID" ng-options="d.SubDepartmentID as d.DepartmentLabel for d in DepartmentList"><option value=""></option></select>

所以我确实添加了空值，但我修改了 Controller 中已有的 watch ，如果它返回 null，则将 $scope.search.SubDepartmentID 设置为未定义:

$scope.$watchCollection('[search.$, search.Status, search.SubDepartmentID]', function (newSearch) {
    if ($scope.search != undefined) {
        if ($scope.search.SubDepartmentID == null) {
            $scope.search.SubDepartmentID = undefined;
        }
    }
});

$scope.search.SubDepartmentID 在页面加载时未定义，在选择空值时将其重置为未定义就成功了!

再次感谢您的帮助!

关于javascript - 在 AngularJS 中取消选择 ng-options 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21030046/

javascriptng-optionsSubDepartmentIDsearch34angularjs

有关javascript - 在 AngularJS 中取消选择 ng-options 下拉菜单的更多相关文章

  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 - Rails 3 的 RGB 颜色选择器 - 2

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

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

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

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

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

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

  8. ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2

    我的Rails应用程序中安装了carrierwave。但是，当用户上传多页pdf时，我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗？用什么命令？这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

  9. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking

  10. ruby-on-rails - 多次选择一个随机数，但绝不会两次选择相同的随机数 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过，则无法再次显示。如何最轻松地做到这一点？

随机推荐