Question

我有一个有角度的页面，我正在使用带有ng-Options的下拉列表来获取和设置值。一切都很好。但是，我需要美化这个。我发现CSS的选择框无法直接美化。我尝试使用ui-select但是添加而不仅仅是取得了我想要的结果。有人可以帮助我实现同样的目标吗？

SNIPPET：

<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-select或其他方式获得美化选择下拉菜单。

AngularJs - 制作漂亮的选择下拉框（不使用图像）

0 个答案: