0 
    <script src="bootstrap-select.js"></script>
        <link rel="stylesheet"
      href="bootstrap-select.css">

           <select ng-model="item" data-style="btn"  class="selectpicker" ng-style="valid  && {'btn-custom': 'border:1px solid green'}" ng-options="item.code as item.name for item in items">
             <option value="">Select Service</option>
    </select>

我正在使用“引导选择”来显示下拉控件。由于这是一个 AngularJS 应用程序，我有一个范围变量。此变量“有效”设置为真。当此变量“有效”设置为 true 时，我正在尝试为 bootstrap-select 显示的引导按钮添加一个红色边框。

但是这种风格没有正确地应用到按钮上。

我查看了许多高级引导按钮样式，但对于此要求，它们似乎太高级了。我怎样才能做到这一点 ？

bootstrap-select 显示这个按钮，当我添加 style="border: 1px solid red;" 在 Chrome 中通过编辑并保存我得到一个红色边框。但我不确定可以生成这个的代码。

   <button type="button" class="dropdown-toggle selectpicker btn" data-toggle="dropdown" title="Select Service"><span class="filter-option pull-left">Select Service</span>&nbsp;<span class="caret"></span></button>

我有一个AngularJS 论坛成员根据我的问题创建的 JFiddle ( http://jsfiddle.net/cjq7jgkn/6/ )，该问题显示了一个示例。但这并不是我想要的。我已经解释了我在上面寻找的东西。

更新：我正在编辑它，因为它比添加评论更容易。

建议的新代码是这样应用的。

 <select ng-model="item" class="selectpicker ng-pristine ng-untouched ng-valid" ng-style="{ 'border' : true ? '1px solid red':'1px solid green'}" ng-options="item.code as item.name for item in items" style="border: 1px solid red; display: none;"><option value="" class="">Select Service</option><option value="0">Peter F. Hamilton</option><option value="1">Alastair Reynolds</option><option value="2">Isaac Asimov</option></select>

但是如果我可以将它应用到按钮上（通过在 chrome 中编辑）它就可以工作。看起来应该以将样式属性添加到 bootstrap-select 使用的引导按钮的方式使用此代码。

显示按钮的行显示在问题中。

4

1 回答 1

1

如果我正确理解了您的要求。您可以在 ng-style 中使用条件样式：

ng-style="{ 'border' : valid ? '1px solid red':'1px solid green'}"

这是更新的 jsfiddle
请注意，这需要 AngularJS 版本为 1.1.5+

于 2015-02-26T08:16:36.577 回答