gpt4 book ai didi

css - 使用 AngularJS 在 Kendo UI 中设置样式

转载 作者:行者123 更新时间:2023-11-28 17:41:09 25 4
gpt4 key购买 nike

使用 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

谢谢!!

最佳答案

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

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

关于css - 使用 AngularJS 在 Kendo UI 中设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24106048/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com