Question

我正在尝试使用angular进行搜索引擎界面。用户在表单中选择一些参数，单击“搜索”，然后使用$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>

和页面中的其他位置是结果列表。

用户还可以使用以下网址访问搜索结果页：

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

几乎一切正常：显示结果列表，“milestone”参数是在select组件中使用正确的值预先选择的，但不是“property”参数，因为它不是字符串，这是一个对象。

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

或关于我应该怎么做的任何其他想法？

Answer 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>

Answer 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。

Answer 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/

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

Answer 4

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

选择属性时，它会保存此对象的索引，然后在页面加载时，将select的ng-model设置为此索引的值。它使用：example来设置索引，使用example来获取对象数组中此索引的值。

如何将默认的'select'ng-model设置为对象？

4 个答案: