文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJs -制作漂亮的选择下拉框(不使用图像)

问AngularJs -制作漂亮的选择下拉框(不使用图像)
EN

Stack Overflow用户

提问于 2016-12-05 08:27:10

回答 1查看 839关注 0票数 0

我有一个有角度的页面，在这里，我使用带有ng选项的下拉列表来获取和设置值。一切都很好。但是，我需要美化这一点。我发现这个复选框不能被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>

结果：

请帮助我通过ui-选择或其他方式美化选择下拉列表。

javascript

html

css

angularjs

ui-select

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-05 10:46:29

我认为，如果您使用ng-重复符号选择而不是ng-选项，你的生活会更简单。然后你有很多选择去做你想做的事情，但也许最灵活的方法是这样使用ng风格：

<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 option[value="red"]{
    background-red: red;
    ...
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40969968

复制

相似问题

问AngularJs -制作漂亮的选择下拉框(不使用图像)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs -制作漂亮的选择下拉框(不使用图像)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs -制作漂亮的选择下拉框(不使用图像)
EN