AngularJs

Question

我有一个 angular 页面，我在其中使用带有 ng-Options 的下拉菜单来获取和设置值。一切正常。但是，我需要美化它。我发现select框不能被CSS直接美化。我尝试使用 ui-select 但添加而不是仅添加并不能获得我想要的结果。有人可以帮助我实现同样的目标吗？

片段：

<html>
<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>

</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 

<select ng-model="colors" ng-options="x.text for x in colors track by x.value"></select> 
<!-- <ui-select ng-model="colors" ng-options="x.text for x in colors track by x.value"></ui-select> Not Working--> 

<script>

//app declaration
var app = angular.module('myApp',[]);

//controller declaration
app.controller('myCtrl',function($scope){

    $scope.colors = [{value:1, text:"red"},{value:2, text:"green"},{value:3, text:"blue"}];
    $scope.colors.value = 1;
});

</script> 

</body> 
</html>

结果：

Pls, help me get beautified select dropdown by ui-select or otherwise.

Answer 1

我认为如果您对 select 使用 ng-repeat 符号而不是 ng-options，您的生活会更简单。然后你有很多选择做你想做的事，但也许最灵活的是这样使用 ng-style:

<select ng-model="colors">
    <option ng-repeat="x in colors track by x.value" ng-style="{ 'background-color' : x.text}">{{x.text}}</option>
</select>

如果您想对您的 select 做进一步的 "beautifying"，互联网上有很多资源可以讨论它。您应该必须使用属性规则：

select option[value="red"]{
    background-red: red;
    ...
}

AngularJs - 制作漂亮的Select下拉框（不使用图片）

AngularJs - Making beautiful Select Dropdown Box (without using Image)

html

javascript

css

ui-select