将相同的数据绑定到angularJS中的不同表单元素

Let say user can advanced search by many conditions such as colors for somethings on responsive website.

假设用户可以通过许多条件进行高级搜索,例如响应式网站上的某些颜色。

colors can select from checkbox in page when screen > 768px but that advanced search will disappear when screen size < 768px and appear icon on top right corne. When click that icon, appear advanced search from right side like android nav drawer and set the colors to select element (multiple select).

当屏幕> 768px时,颜色可以从页面中的复选框中选择,但当屏幕尺寸<768px时,高级搜索将消失,并在右上角显示图标。单击该图标时,从右侧显示高级搜索,如android nav drawer,并设置颜色以选择元素(多选)。

Following code is ok on checkbox:

以下代码在复选框上正常:

<label ng-repeat="(color, enabled) in colors">
    <input type="checkbox" value="color" ng-model="colors[color]"> {{color}}
</label>

using this data:

使用这些数据:

$scope.colors = { 'Silver': true, 'Gray': false, 'White': true, 'Brown': false};

How to bind data for select element using above data?

如何使用上面的数据绑定select元素的数据?

Or something needs to change above data format?

或者某些东西需要改变以上数据格式?

1 个解决方案

#1

Angular has the ng-options directive which allows you to iterate over an object and supply <option> to a <select>. Given the right format, you can use that same object for your <select>.

Angular具有ng-options指令,允许您迭代对象并将提供给。给定正确的格式,您可以为使用相同的对象。