8

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

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

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>

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

用户还可以使用这样的 url 访问搜索结果页面：

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

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

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

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

4

4 回答 4

27

当使用对象数组进行选择迭代时，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>
于 2014-01-21T09:45:08.910 回答
3

您可以在 ngOptions 中使用这种形式的理解表达式：按组标记数组中的值。Html 下拉列表将仅显示所选对象的名称。模型将包含整个选定对象。您可以从控制器设置选定的对象。

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

检查这个plnkr 示例。

于 2014-01-08T08:35:45.117 回答
0

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/

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

于 2013-09-02T01:37:40.600 回答
0

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

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

于 2013-09-20T14:19:07.770 回答