CODEWITHSUNDEEP
javascriptangularjsui-select
balteo
balteo

Reputation: 24679

angular-ui-select control themeing and customizing

I use Angular UI https://github.com/angular-ui/ui-select.

I have a slight issue with my usage of the control. I would like to avoid altogether having a arrow (which seems to allow users to submit the whole form unfortunately). See red circle below:

screen capture

Here is the corresponding html:

<div class="form-group">
        <label for="address" class="control-label col-lg-3">signup.form.address</label>
        <div class="col-lg-6">
            <ui-select ng-required="true" id="address" name="address" ng-model="signupForm.addressReference"  reset-search-input="false" theme="bootstrap">
                <ui-select-match placeholder="Select address...">{{$select.selected.description}}</ui-select-match>
                <ui-select-choices repeat="address.reference as address in addresses track by $index" refresh="chooseAddress($select.search)" refresh-delay="0">
                    {{address.description }}
                </ui-select-choices>
            </ui-select>
        </div>
        <div ng-messages="signupNgFormCtrl.address.$error" ng-if="signupNgFormCtrl.$submitted" class="col-lg-3">
            <div ng-message="required">required</div>
        </div>
    </div>

Can anyone please help?

Regards,

Upvotes: 2

Views: 5353

Answers (1)

Dmitri Zaitsev
Dmitri Zaitsev

Reputation: 14046

All templates are defined at the end of select.js. For instance, this one has class="select2-arrow":

$templateCache.put("select2/match.tpl.html", 
    "<a ...> ... <span class=\"select2-arrow ui-select-toggle\" ng-click=\"$select.toggle($event)\"><b></b></span></a>");

or that one has <span class=\"caret ui-select-toggle\" ng-click=\"$select.toggle($event)\"></span>:

 $templateCache.put("bootstrap/match.tpl.html", ...

Both have ng-click event that might cause the effect you mention. To avoid the arrow or the effect, you can override the template that corresponds to your theme.

Upvotes: 10

Related Questions