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

Question

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).

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?

Or something needs to change above data format?

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