草庐IT

javascript - ng-options 选择列表值设置为我选择的 id 并将其与 ng-model 正确绑定(bind)

coder 2025-03-16 原文

使用 angular 我想创建一个选择列表，其值采用我选择的 id(对象的实际 id 属性)，我想用 ng-model 指令正确绑定(bind)它。

这是我试过的:

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People track by p.id"></select>

$scope.People = [
    { name : "Fred", id : 1 },
    { name : "Joe", id : 2 },
    { name : "Sandra", id : 3 },
    { name : "Kacey", id : 4 },
    { name : "Bart", id : 5 }
];

$scope.setTo1 = function(){
    $scope.selectedPersonId = 1;
}

http://jsfiddle.net/b7dyadnr/

这里select option value是正确的值(value是people中person的id)，text是正确的。但是绑定(bind)不起作用，所以如果我设置 $scope.selectedPersonId 的值，则选择不会反射(reflect)在列表中。

我知道我可以让它像这样工作:

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People"></select>

http://jsfiddle.net/rgtbn2f5/

我可以设置 $scope.selectedPersonId 并且更改会反射(reflect)在列表中。但是选择列表选项值中使用的 id 不是实际人的 id! 

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred -->
<option value="1" selected="selected">Joe</option>
...

我想像这样使用它，除了我希望 angular 在选择选项值中使用人的真实 ID，而不是数组的索引或它使用的任何东西。

如果你想知道我为什么要这样使用它，那是因为 id 被发送到 API，并且模型也可以使用查询字符串设置，所以我必须让它像这样工作。

最佳答案

之前遇到过同样的问题。而且 p.id 似乎只能在 select 或 trackexpr 中的一个地方工作。它对我有用的唯一方法(值设置为 id)是这样的:

<select 
ng-model="selectedPerson"                 
ng-options="p as p.name for p in People track by p.id"></select>

尽管选择 id = 1 的人的代码看起来很难看:

$scope.setTo1 = function () {
    $scope.selectedPerson = $scope.People.filter(function (item) {
        return item.id == 1
    })[0];
}

这里是 jsfiddle .

这是因为您必须为 ng-model 分配与 ng-options 集合中相同的项目，因为它们是通过引用进行比较的。这是来自 Angular documentation :

Note: ngModel compares by reference, not value. This is important when binding to an array of objects. See an example in this jsfiddle.

所以我最终放弃了，让 Angular 将选项值设置为它需要的任何值，因为它可以让我将 assignemnet 简单地设置为:$scope.selectedPersonId = 1

关于javascript - ng-options 选择列表值设置为我选择的 id 并将其与 ng-model 正确绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25884059/

并将javascriptcode34jsfiddleangularjsselectlistangularjs-ng-options

有关javascript - ng-options 选择列表值设置为我选择的 id 并将其与 ng-model 正确绑定(bind)的更多相关文章

  1. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案，但在Google上花了很多时间，所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中，我有几个模型共享一种特定类型的字符串属性，该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复)，但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件，但这只会让验证干给这个特殊的字符串它自己的模型，但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类，但是我如何得到ActiveRecord关联这个类模型

  2. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

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

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

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

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

  6. python - 如何读取 MIDI 文件、更改其乐器并将其写回？ - 2

    我想解析一个已经存在的.mid文件，改变它的乐器，例如从“acousticgrandpiano”到“violin”，然后将它保存回去或作为另一个.mid文件。根据我在文档中看到的内容，该乐器通过program_change或patch_change指令进行了更改，但我找不到任何在已经存在的MIDI文件中执行此操作的库.他们似乎都只支持从头开始创建的MIDI文件。 最佳答案 MIDIpackage会为您完成此操作，但具体方法取决于midi文件的原始内容。一个MIDI文件由一个或多个音轨组成，每个音轨是十六个channel中任何一个上的

  7. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

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

  9. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调，即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中？我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

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

随机推荐