【发布时间】：2015-09-04 11:11:06
【问题描述】：
我正在尝试在我的项目中使用 angular ui-select，但不知何故 css 无法正常工作。
index.html:
<link rel="stylesheet" href="bower_components/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="bower_components/angularjs-slider/dist/rzslider.css" />
<link rel="stylesheet" href="bower_components/angular-dropdowns/dist/angular-dropdowns.css" />
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/textAngular/dist/textAngular.css" />
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css" />
<link rel="stylesheet" href="bower_components/angularjs-toaster/toaster.css" />
<link rel="stylesheet" href="bower_components/ngprogress/ngProgress.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<script src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<script src="bower_components/perfect-scrollbar/src/perfect-scrollbar.js"></script>
<script src="bower_components/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script src="bower_components/angularjs-geolocation/src/geolocation.js"></script>
<script src="bower_components/angularjs-toaster/toaster.js"></script>
<script src="bower_components/ngprogress/build/ngProgress.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
软件包版本：
Angularjs: 1.4.5
ui-bootstrap: 0.11.2
Angular ui-select: 0.12.1
html 文件：
<ui-select ng-model="stream.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
<ui-select-match placeholder="Select a social profile in the list">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="profile in socialNetworks | filter: $select.search">
<div ng-bind-html="profile.name | highlight: $select.search"> </div>
</ui-select-choices>
</ui-select>
controller.js
'use strict';
angular.module('myApp')
.controller('AddStreamPopUpCtrl', function ($scope, $modalInstance, $state, socialNetworks, $modal) {
$scope.close = function () {
$modalInstance.dismiss('close');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.redirect = function() {
$state.go('dashboard.mailbox.inbox');
$modalInstance.dismiss('close');
};
$scope.socialNetworks = [{name:'test', value: 'someVal'}];
});
以上代码的结果如下：
谁能指点为什么这不能正确加载css？
【问题讨论】：
-
你用的是什么主题？
-
它不适用于任何主题。不知何故，我的 html 之前没有出现在问题中..更新了
-
您没有下载 select2.css。尝试使用多选示例中所示的“select2”主题。
-
你能分享一下这个例子吗？会很棒的
标签： javascript css angularjs twitter-bootstrap ui-select