Question

有谁知道如何将input-lg类添加到我的ui-select指令中？我正在使用angularJs ui-select和bootstrap主题。

我试过了

<ui-select ng-model="link.closer.data" class="input-lg">

我还查看了select.js文件并尝试添加input-lg但似乎没有任何工作

Answer 1

我遇到了同样的问题。我用css解决了它。

.ui-select-bootstrap>.ui-select-match>.btn,
.form-control:focus {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

Answer 2

uiSelect指令在其配置中有replace:true。您添加到该元素的任何内容都将被删除。文档和代码无法通过快速扫描添加自定义类。

然而，实现确实有主题的概念。这被定义为directives元素的属性。内置了许多主题。

自举
SELECT2
selectize

例如，要使用这些主题，您可以使用：

// Bootstrap
<ui-select ng-model="link.closer.data" theme="bootstrap">

// Select 2
<ui-select ng-model="link.closer.data" theme="select2">

// Selectize
<ui-select ng-model="link.closer.data" theme="selectize">

如果您查看模板中加载的代码，您会在templateUrl属性中看到以下内容。

templateUrl: function(tElement, tAttrs) {
    var theme = tAttrs.theme || uiSelectConfig.theme;
    return theme + (angular.isDefined(tAttrs.multiple) ? 
        '/select-multiple.tpl.html' : 
        '/select.tpl.html');
}

因此angular将根据指令属性加载正确的主题，或使用配置中的默认值。

作为一种解决方法，您可以通过为它们构建模板来创建自己的主题。

// Note the location for my theme is "mytheme/select.tpl.html"
// making my theme name: "mytheme"
angular.module("customSelect")
    .run(["$templateCache", function($templateCache {
        $templateCache.put("mytheme/select.tpl.html",
            "<p>my custom html here<\/p>";
    ]});

一种简单的方法是打开ui-select/dist/select.js滚动到底部。复制bootstrap的所有templateCache声明。将它们粘贴到您自己的项目中并修改主题名称和html，包括您的班级input-lg。

现在将主题名称包含在指令中作为主题。

<ui-select ng-model="link.closer.data" theme="mytheme">

并使用原生

<ui-select ng-model="link.closer.data">

或者

<ui-select ng-model="link.closer.data" theme="bootstrap">

现在您可以完全控制指令生成的HTML，包括所有类名等，而无需修改核心代码。

AngularJs UI-选择更改为input-lg

2 个答案: