angularjs – 为样式选择选项组

发布时间：2020-12-17 17:20:29 所属栏目：安全来源：网络整理

导读：如何使用ng-options选择选项组的样式？ HTML： select ng-model="filteredBy" ng-options="obj_data.value as obj_data.title group by obj_data.group for obj_data in data"/select JS： $scope.filteredBy = 'true'; $scope.data = [{ "group": "byStatus

如何使用ng-options选择选项组的样式？

HTML：

<select ng-model="filteredBy" ng-options="obj_data.value as obj_data.title group by obj_data.group for obj_data in data"></select>

JS：

$scope.filteredBy = 'true';
    $scope.data = [{
      "group": "byStatus","title": "ACTIVE","value": "false"
    },{
      "group": "byStatus","title": "COMPLETED","value": "true"
    },{
      "group": "byColor","title": "Blue","value": "#27a9e3"
    },"title": "Green","value": "#28b779"
    }];

在上面的例子中,我想给颜色设置样式(蓝色和绿色).

如何使用ng-options`做到这一点？

DEMO PLUNKR

解决方法

如果你想给选项赋予颜色,那么你必须使用ng-repeat而不是ng-option然后使用ng-style设置背景颜色…

<select ng-model="filteredBy">
  <option ng-repeat="val in data" ng-style = "{'background':val.value}" >{{val.title}}</option>     
</select>

对于分组,您需要修改数据,如下所示

$scope.filteredBy = 'true';
$scope.data = [{
  'group': 'byStatus','content':[{'title': 'ACTIVE','value': 'false'},{'title': 'COMPLETED','value': 'true'
}]},{
  'group': 'byColor','content':[{'title': 'Blue','value': '#27a9e3'},{'title': 'Green','value': '#28b779'}]

}];

HTML

<select ng-model="filteredBy">
  <optgroup ng-repeat="val in data" label={{val.group}} >
    <option ng-repeat="v in val.content" ng-style = "{'background':v.value}" >{{v.title}}</option>
  </optgroup>
</select>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!