如何将默认的“选择”ng-model 设置为对象？答案

【问题标题】：how to set the default 'select' ng-model to an object?如何将默认的“选择”ng-model 设置为对象？
【发布时间】：2013-09-01 21:04:50
【问题描述】：

我正在尝试使用 Angular 做一个搜索引擎界面。用户在表单中选择一些参数，点击“搜索”，然后使用$location.search()将参数填充到url中

用于构建表单的搜索界面参数：

params = {
    milestones: [ "a", "b", "c", "d", etc. ], 
    properties: [ 
        { "name": "name A", type: "text" }, 
        { "name": "name B", type: "checkbox" }, 
        { etc. }
    ]
}

在控制器内部：

$scope.query = $location.search();  // get the parameters from the url  
$scope.search = function (query) {  // set the parameters to the url
    $location.search(query);    
};

和表单的html

<select ng-model="query.milestone_name" ng-options="ms for ms in params.milestones">
    <option value="">-select milestone-</option>
</select>
<select ng-model="property" ng-options="prop.name for prop in params.properties" ng-change="query.property_name=property.name">
<!-- if the object 'property' was passed in the url, it would look like this `%5Bobject%20Object%5D`, so its 'name' parameter is converted to a string -->
    <option value="">-select property-</option>
</select>
<span ng-switch="property.type">
    <label ng-switch-when="text">{{query.property_name}}: <input type="text" ng-model="query.property_value"></label>
    <label ng-switch-when="checkbox">{{query.property_name}}: <input type="checkbox" ng-model="query.property_value"></label>
</span>
<button ng-click="search(query)">search</button>

页面中的其他地方是结果列表。

用户还可以通过如下网址访问搜索结果页面：

http://myapp.com/search?milestone_name=a&property_name=name%20A

几乎一切正常：显示结果列表，在select 组件中使用正确值预先选择了“里程碑”参数，但不是“属性”参数，因为它不是字符串，而是目的。

如何将选择组件的默认值（ng-model）设置为对象？

或任何其他关于我应该如何做到这一点的想法？

【问题讨论】：

标签： angularjs

【解决方案1】：

当使用对象数组进行选择迭代时，ng-options 指令需要具有对象的属性来匹配（并区分数组）

使用指令声明的track by 部分，例如

<select ng-model="property" ng-options="prop.name for prop in params.properties track by prop.name" ng-change="query.property_name=property.name">
<!-- if the object 'property' was passed in the url, it would look like this `%5Bobject%20Object%5D`, so its 'name' parameter is converted to a string -->
    <option value="">-select property-</option>
</select>

【讨论】：

谢谢！！！这正是我需要做的。
也为我工作。 track by 完成了这项工作。如果要过滤列表，则必须在表达式的末尾使用它，因为 answer 建议
我尝试过“track by”，但选项值仍然看起来像“object:875”，而且我的 ng-selected 不起作用

【解决方案2】：

您可以在 ngOptions 中使用这种形式的理解表达式：label group by group for value in array。 Html 下拉列表将仅显示所选对象的名称。模型将包含整个选定对象。您可以从控制器设置选定的对象。

  <select ng-model="property"
          ng-options="prop as prop.name for prop in params.properties">
  </select>

检查这个plnkr example。

【讨论】：

【解决方案3】：

ng-options 正在生成一些与ng-model 一起使用的选项。在您的语法 (prop.name for prop in params.properties) 中，您告诉它绑定到数组中找到的对象（与它上面的属性相反 - 这是您想要做的）并使用它的 name 属性作为要显示的值。因此，当您尝试将ng-model 设置为不在ng-options 数组中的对象时，什么也没有发生-我猜是因为它使用了引用/浅相等而不是深相等。所以你应该做的是：

将ng-options 对象转换为字符串数组。
使用涉及键的语法，例如：

prop.name as prop.name for prop in params.properties

http://jsfiddle.net/C5ENK/

如果这不符合您的需求，请告诉我原因，我会看看能否提供进一步的帮助。

【讨论】：

感谢您的回答。问题是我需要将完整对象绑定到ng-model，例如检索其在以下ng-switch 中使用的“类型”属性。用你的解决方案，我认为这是不可能的？
如果这是你唯一的问题，你可以让你的属性成为一个查找而不是你可以做的数组你可以做<span ng-switch="properties[property.name].type">。让我知道这是否没有意义，或者，如果有，如果这不能解决您的问题。

【解决方案4】：

我找到了一种解决方案……

选择属性时，它将保存此对象的索引，然后在页面加载时，将 select的NG模型设置为此索引的值。它使用这个：example 来设置索引，这个example 用于获取对象数组中这个索引的值。

【讨论】：