Question

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

我正在使用＆＃39; bootstrap-select＆＃39;显示下拉控件。由于这是一个AngularJS应用程序，因此我有一个范围变量。这个变量有效＆＃39;设置为true。我试图在bootstrap-select显示的bootstrap按钮上添加一个红色边框，此变量有效＆＃39;设置为true。

但是这种风格没有正确应用于按钮。

我已经看过许多高级引导按钮样式，但它们似乎太高级了，无法满足此要求。我怎么能这样做？

bootstrap-select显示此按钮，当我添加style =＆＃34; border：1px solid red;＆＃34;在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中编辑），它就可以了。看起来这个代码应该以一种方式使用，它将style属性添加到bootstrap-select使用的引导按钮。

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

Answer 1

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

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

这是updated jsfiddle
请注意，这需要AngularJS版本1.1.5 +

通过添加边框条件设置引导按钮的样式

1 个答案: