1

我正在尝试创建一个内联 angular-ui-select 框，其中的图像显示在 1 个选项附近http://plnkr.co/edit/27g6JYtB7tg0w70ROZDb

<body ng-controller="DemoCtrl">

<form class="form-inline" role="form">
    <div class="form-group"  ng-init="choices=[{'toc_text':'Day 1'}, {'toc_text':'Day 2'},{'toc_text':'Day 3', 'show_flag':true}, {'toc_text':'Day 4'}]">
        <ui-select ng-model="choice.selected" theme="bootstrap">
            <ui-select-match placeholder="Select day">{{$select.choice.toc_text}}<button ng-show="$select.choice.first_responder"  type="button" class="btn ntbtn-rnote btn-xxs btn-notes">R</button>
            </ui-select-match>
            <ui-select-choices repeat="choice in choices">
                <span ng-bind-html="choice.toc_text"></span>
                <span ng-show="choice.show_flag"><button type="button" class="btn btn-xxs btn-notes">R</button></span>
            </ui-select-choices>
        </ui-select>
    </div>
    <div class="form-group">

        <div class="btn-group">
            <button type="button" class="btn btn-primary active">Button1</button>
            <button type="button" class="btn btn-primary">Button2</button>
        </div>
        <div id="buttonGroup1" class="btn-group">
            <button type="button" class="btn btn-default">Button3</button>
            <button type="button" class="btn btn-default">Button3</button>
            <button type="button" class="btn btn-default">Button3</button>
        </div>
        <button class="btn btn-default" type="button">
            Comments <span class="badge">4</span>
        </button>
    </div>
</form>

我是使用 ui-select 的新手，但我不知道：

  1. 为什么单击按钮时按钮大小会发生变化
  2. 为什么选择它时未选择所选选项（或者至少为什么它没有显示为选择框中的选择）

我选择使用 angular-ui-select 是因为我不知道如何让 bootstrap-select 显示图像。

4

1 回答 1

0

我认为 ui-select 需要绑定到控制器上的对象才能使绑定正常工作。

在控制器中，添加类似

$scope.formData = {};

在标记中，绑定到formData.selectedChoice

<div class="form-group"  ng-init="choices=[{'toc_text':'Day 1'}, {'toc_text':'Day 2'},{'toc_text':'Day 3', 'show_flag':true}, {'toc_text':'Day 4'}]">
            <ui-select ng-model="formData.selectedChoice" theme="bootstrap">
                <ui-select-match placeholder="Select day">{{$select.selected.toc_text}}<button ng-show="$select.choice.first_responder"  type="button" class="btn ntbtn-rnote btn-xxs btn-notes">R</button>
                </ui-select-match>
                <ui-select-choices repeat="choice in choices">
                    <span ng-bind-html="choice.toc_text"></span>
                    <span ng-show="choice.show_flag"><button type="button" class="btn btn-xxs btn-notes">R</button></span>
                </ui-select-choices>
            </ui-select>
        </div>

这是一个笨蛋

于 2015-03-11T19:34:19.157 回答