AngularJS 下拉列表不显示所选值

2024-02-22

在角度下拉列表中显示所选值时面临问题。 当我这样给予时它就起作用了

$scope.selectedItem = $scope.items[1];

不起作用,如果我直接给出该值

$scope.selectedItem = { name: 'two', age: 27 };

HTML:

<html ng-app="app">
  <body>
    <div ng-controller="Test">
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
    </div>
  </body>
</html>

JS:

var app = angular.module('app',[]);
app.controller('Test',function($scope){
   $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
  $scope.selectedItem = $scope.items[1];
});

CODEPEN: http://codepen.io/anon/pen/zxXpmR http://codepen.io/anon/pen/zxXpmR

解决方案:

谢谢萨米尔达斯。我按照你的建议修复了。

var choosen_value = { name: 'two', age: 27 };
angular.forEach($scope.items, function(item){
  if(angular.equals(choosen_value, item)){
    $scope.selectedItem = item;
  }
});

正如其他答案中所解释的,虽然这两个对象可能具有相同的属性和值,但它们是两个不同的对象,因此角度不认为它们是相等的。

但是您可以使用track by表达于ng-选项 https://docs.angularjs.org/api/ng/directive/ngOptions指定一个决定相等性的属性:

ng-options="item.name for item in items track by item.name"

http://codepen.io/anon/pen/WbWMrp http://codepen.io/anon/pen/WbWMrp

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 下拉列表不显示所选值 的相关文章

随机推荐

  • 如何在 AWS Cognito 中编辑尝试更改密码的限制?

    我已经实现了更改密码功能 现在我想测试一下 但我面临着尝试的极限 我应该做什么来防止这个错误 已超出尝试次数限制 请稍后再试 我是 Cognito 团队的成员 这是不可配置的 我们确实有保护机制来防止用户滥用忘记密码的 API 这可能就是您
  • Keras 中的 add_loss 函数的用途是什么?

    目前 我偶然发现了变分自动编码器 并尝试使用 keras 让它们在 MNIST 上工作 我找到了一个教程github https github com keras team keras blob master examples variat
  • 如何按周添加两个日期中的日期?

    I have a table in which rows have dates as monday dates of the weeks Some consecutive rows may not have consecutive week
  • 如何在 F# 模块中定义可选参数?

    我正在尝试用 F 重写一个小型 C 库 但遇到了错误 我试图为模块中的方法定义可选参数 但编译器说 可选参数仅允许在类型成员上使用 我查过为什么你不能在松散的函数中使用它们 https stackoverflow com questions
  • 使用 jQuery.extend 覆盖函数的原因可能是什么?

    我正在寻找扩展引导插件的正确方法 并找到了这个答案 https stackoverflow com a 12689534 1276032 https stackoverflow com a 12689534 1276032 让我烦恼的是最后
  • OpenCV,与教程中的代码进行特征匹配

    我复制了代码与 FLANN 的特征匹配 http docs opencv org doc tutorials features2d feature flann matcher feature flann matcher html featu
  • Jquery 移动:ui-state=dialog

    我正在使用 JQuery mobile 作为用户菜单列表 但它似乎保存了按下的按钮链接 ui state dialog 当我使用网络浏览器上的后退按钮时 这会干扰导航 如何删除添加到 URL 的 ui state dialog 例子 htt
  • 如何计算集群所需的zookeeper服务器数量?

    有没有公 式可以计算我需要的zookeeper服务器数量 假设一个集群可能有 50 500 或 5000 个服务器在运行 我如何将这些数字转换为我想要启动的 Zookeeper 服务器数量 换句话说 对 zk 服务器可以处理的工作负载有什么
  • 无法导入 scala.reflect.runtime.universe

    我想按照 scala 2 10 2 中的示例来尝试反射本教程 http docs scala lang org overviews reflection environment universes mirrors html 当我启动 sbt
  • 快速解析对象内的json数组

    这是一个样本json我必须在我的项目中实现的代码 请告诉我如何编写代码 我写了很多次代码 这根本不是工作 所以我希望请提供完整的例子 在这里我可以看到 首先有一个对象 接下来有一个多个对象 最后是一个对象内的数组 请查看详情 Activit
  • Tkinter Canvas 将项目移动到顶层

    我有一个 Tkinter Canvas 小部件 Python 2 7 而不是 3 在这个 Canvas 上我有不同的项目 如果我创建一个与旧项目重叠的新项目 它将位于前面 现在 我如何才能将旧项目移动到新创建的项目前面 甚至移动到画布上所有
  • jQuery 从链接获取带有变量的 url 并通过 Ajax 发送它

    我可以使用此链接通过 GET 将产品添加到购物车 div a href Add to Cart a div 我想使用 jQuery Ajax 保持在同一页面上 如果启用了 JS 我已经写出了以下内容 但当然它不起作用 有人可以看看出了什么问
  • C ++,stl,map如何按值而不是键排序

    我想仅使用值而不是键对地图容器中的元素进行排序 怎么做 我知道地图可以按键值排序 但反之亦然怎么办 我在 stackoverflow 中发现了同样的问题 我喜欢这个solution https stackoverflow com a 269
  • 什么时候适合使用 df.value_counts() vs df.groupby('...').count()?

    我听说 Pandas 通常有多种方法可以做同样的事情 但我想知道 如果我尝试按特定列中的值对数据进行分组并计算具有该值的项目数 那么什么时候使用才有意义df groupby colA count 什么时候使用才有意义df colA valu
  • 如何使用 C# Entity Framework 5 DbGeography 空间数据纠正多边形环方向

    我正在使用新的实体框架 5 使用空间数据类型 DbGeography 作为我的模型的一部分 用于在一个实例中存储点 在另一个实例中存储多边形 设置 POLYGON 的值时 所有保存都不会出现错误 但是只有当我按顺时针顺序在地图上绘制多边形时
  • 使用AJAX将网页内容加载到DIV中

    我有一个文本字段 当我在文本字段中输入内容时 我想将内容加载到下面的 DIV 中 这就是我的等效代码
  • 当我右键单击图标时出现无限 gtk 警告

    由此tuto http zetcode com tutorials gtktutorial firstprograms include
  • 编程中死锁问题有多常见?

    我用多种语言进行编程 但我不知道代码中是否存在死锁 我认为这意味着它不会发生 这种情况经常发生吗 在编程中 not在数据库中 足以让我担心它吗 如果满足以下两个条件 则可能会出现死锁 您有多个线程 并且它们争用多个资源 你写多线程代码吗 您
  • Gtk Ckipboard:使用自定义 URI 方案从源粘贴文件

    我正在尝试编写一个 GTK C 应用程序 将一些文件放在 Gtk 剪贴板上 以便使用 Nautilus 的用户能够粘贴它们 有一个好的stackoverflow 上 Gtk 剪贴板本地文件复制和粘贴的示例 https stackoverfl
  • AngularJS 下拉列表不显示所选值

    在角度下拉列表中显示所选值时面临问题 当我这样给予时它就起作用了 scope selectedItem scope items 1 不起作用 如果我直接给出该值 scope selectedItem name two age 27 HTML