1

オプションhttp://plnkr.co/edit/27g6JYtB7tg0w70ROZDbの近くに画像を表示するインラインangular-ui-selectボックスを作成しようとしています

<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. 選択した選択肢が選択されていない理由 (または、少なくとも選択ボックスで選択されているように表示されない理由)

bootstrap-select を取得して画像を表示する方法がわからなかったため、 angular-ui-select を使用することにしました。

4

1 に答える 1