javascript - ng-options 选择默认值

标签 javascript html node.js angularjs ng-options

所以我的问题几乎和这个一样:how to use ng-option to set default value of select element

我无法获得被选择的良好值(value)。我还尝试了许多 ng-init 等解决方案...

但我不知道如何解决。

我有这个模型:

var CarSchema = new Schema({
[... some stuff ...]
ville: {
    type: Schema.ObjectId,
    ref: 'City'
}
});

var CitySchema = new Schema({
 name: {
    type: String
}
});

我的 HTML 代码:

<select ng-model="car.ville" ng-options="city.name for city in cities"><option value=""/></select>
            HERE 1: {{ car.ville | json }}
            <BR>
            HERE 2 : {{cities | json}}

结果我得到:

HERE 1: { "_id": "536fee62cadf4efc08000001", "name": "Hinsdale" } 

HERE 2 : [ { "_id": "53703935cadf4ef008000000", "name": "Noumea" }, { "_id": "536fee62cadf4efc08000001", "name": "Hinsdale" }, { "_id": "536fee3ccadf4ef808000000", "name": "Bascom" } ]

所以我应该选择 Hinsdale 城市...但是不,它位于第一行(空行)。

我做错了什么?尝试了很多配置还是不行

添加 fiddle 示例:jsfiddle.net/pL44W/5

所以我让它几乎可以用这个 fiddle 工作:

http://jsfiddle.net/Tyvain/UuVYL/

  • 确定保存
  • 可以在我们到达页面时检索有效值
  • 不正常:当我们在列表中选择时看不到该值。

为了保存,mongo 只需要 ville 属性中的 id。但要显示,我需要 name 属性...

就像我在绕圈跑......

最佳答案

您期望 car.ville 绑定(bind)到城市对象,但您的 ngOptions “说”模型应该绑定(bind)到城市名称

如果您想在下拉列表中显示城市名称,但将您的模型 (car.ville) 与城市对象相关联,请按如下方式更改:

ng-options="city as city.name for city in cities"
<小时/>

此外,为了让 ngOptions 识别模型值,它需要引用数组中的一个项目(而不仅仅是具有相同属性的不同对象,因为相等检查是通过引用而不是通过值完成的)。

另请参阅此 short demo

<小时/>

更新:

如果您确定cities中的每个项目都有唯一的_id,则有一个基于track by功能(在v1.2中引入)的更简单的替代方案:

ng-options="city as city.name for city in cities track by city._id"

现在,ngOptions 可以将列表中的对象与模型值关联起来,不一定是通过引用,而是基于 _id 属性。 (即,就 ngOptions 而言,“相同 _id” 意味着“相同对象”,因此请确保您的 _id 是唯一的。)

另请参阅此 other short demo

关于javascript - ng-options 选择默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23690283/

相关文章:

javascript - 带 Angular 下拉绑定(bind)

javascript - MEAN.JS——请求对象、Express Controller 和 Mongoose 模式

node.js - super 测试/Mocha 错误: global leak detected: path

angularjs - Node 重定向不适用于 Angular

html - Wordpress 中的 Z-Index 子菜单不起作用

javascript - 如何向按钮添加第二个功能?

javascript - 如何从函数效果中排除元素

javascript - 拉斐尔js : Scale and translate elements in a set proportionally

用于从 Swagger、RAML 或 API 蓝图生成 HTML 的 Java 或 JavaScript 库

html - 响应地 float 元素,以便它们平滑地移动