Question

我正在尝试创建一个内嵌的角度ui选择框，其中的图像显示在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的新手，我无法弄明白：

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

我选择使用angular-ui-select，因为我无法弄清楚如何使用bootstrap-select来显示图像。

Answer 1

我认为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>

Heres a plunkr

内联角度ui-select与图像

1 个答案: