Question

使用AngularJS创建一个简单的KendoUI下拉列表。没有看到正确样式的下拉。

这是html ......

<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>

js文件：

(function () {
   'use strict';
  angular.module('app')
  .controller('welcome3',
  [welcome3]);

function welcome3() {
  var vm = this;
  vm.activate = activate;

  activate();

  function activate() {
     vm.phoneOptions = {
        dataSource: {
            data: [
               {name: "iPhone"},
               {name: "Droid"},
               {name: "Windows"}
            ]
        },
        dataTextField: "name",
        dataValueField: "id",
        optionLabel: "Select a phone..."
     };

    }
}
})();

在index.js文件中，我有（除其他外）以下内容：

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">

<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
   // ...

<div ng-view></div>

<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>

下拉列表如下所示：

ugly drop down

与此相反：

nice drop down

谢谢！

Answer 1

通常当你有这样的无风格控件时，这是因为你的样式表链接错误。看起来common文件链接正确，但检查另一个。此外，使用Bootstrap时，请务必使用common-bootstrap CSS文件。

http://trykendoui.telerik.com/@burkeholland/UXav

使用AngularJS在KendoUI中的样式

1 个答案: