Question

我使用selectbox（不可见），它是动态填充和字体更改。用户使用引导UI下拉按钮选择字体。我们可以保持同步选择吗？

我使用下拉按钮，因为我可以格式化相关字体中的条目，并且无法动态填充引导UI下拉按钮。谢谢你的提示。

AngularJS

 $scope.fonts = [{
    value: 'Arial',
    label: 'Arial'
  }, {
    value: 'Tahoma',
    label: 'Tahoma'
  }, {
    value: 'Comic Sans MS',
    label: 'Comic Sans MS'  
  }]; 
  $scope.font = $scope.fonts[0]; // Arial hidden select

HTML

我的选择：

<select style="display: none" ng-model="font" ng-options="font as font.label for font in fonts" id="font-family-select" >            </select>

我的下拉按钮（Bootstrap UI）：

                    <button type="button" data-id="font-family-select" class="btn btn-lg btn-default dropdown-toggle subheader-button" data-toggle="dropdown"  ng-model="font" ng-disabled="disabled" ng-hide="printMode">
                        {{ 'inv.theme.font' | translate }}<span class="caret"></span>
                    </button>


<ul class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-click="OnItemClick('Arial')">
                                <a href="#"><span style="font-family: Arial">Arial</span></a>
                            </li>
                            <li>
                                <a href="#"><span style="font-family: Tahoma">Tahoma</span></a>
                            </li>
                            <li>
                                <a href="#"><span style="font-family: Comic Sans MS">Comic Sans MS</span></a>
                            </li>
                        </ul>

Answer 1

你必须更新＆＃34; font＆＃34;单击菜单项上的模型。

我在你的问题中提出了一个简单的fidle，其中包含一些修改过的标记，但应该清楚http://jsfiddle.net/793f07qL/2/上发生了什么。

注意：您必须将整个对象传递给范围模型，因为＆＃34; ng-options＆＃34;指令使用它来绑定数据：

ng-click="OnItemClick(font)"

$scope.OnItemClick = function (font) {
    $scope.font = font;
};

使用下拉按钮同步选择框

1 个答案: