Bootstrap Select #571 | Support Center

elmogallen created 9 years ago

I'm having a hard time understanding how to use Bootstrap Select in my SPA ASP.NET Zero application. Can you give an example?

This is not working:

<select name="repeatSelect" id="repeatSelect" ng-model="vm.coupon.promotionId" class="selectpicker">
    <option ng-repeat="option in vm.promotions" value="{{option.id}}">{{option.name}}</option>
</select>

Do I need to do anything else?

Thanks, Dave

4 Answer(s)

0

elmogallen created 9 years ago

Also, as a follow-up question. How can I integrate Bootstrap Select if I have an older version of ASPNetZero before it was available. I can't quite figure out what all I need to do because there have been so many changes. I tried upgrading, but it didn't go smoothly.

Dave

elmogallen created 9 years ago

So I've been goofing around and I was able to add Bootstrap Select, following the same pattern as Bootstrap Switch, then I added the js and css to the AppBundleConfig and used the syntax shown on another post here to add the ui-jq="selectpicker" attribute to my <select>.

So, I got it showing up and that's all good, except now it only seems to work if my options are static. If I try to get them using the angular model, I'm thinking that it is trying to convert it to the selectpicker before it has the data available.

<select id="PromotionId" name="PromotionId" class="form-control" ui-jq="selectpicker" data-live-search="true" ng-model="vm.coupon.promotionId" required uib-popover="Must be setup in the Credit Buy Down system first." popover-title="Promotion" popover-placement="right" popover-trigger="mouseenter" popover-append-to-body="true">
    <option ng-repeat="option in vm.promotions" value="{{option.id}}">{{option.name}}</option>
</select>

... in the js: ...
                couponMaintenanceService.getPromotions().success(function (result)
                {
                    console.log("success");
                    vm.promotions = result.items;
                });

How can I tell the selectpicker to update itself?

hikalkan created 9 years ago

Support Team

Hi,

It has a 'refresh' method. I used it like that:

languageService.getLanguageForEdit({
    id: languageId
}).success(function (result) {
    vm.languageNames = result.languageNames;
    setTimeout(function () {
        $('#LanguageNameSelectionCombobox').selectpicker('refresh');
    }, 0);
});

So, you can use refresh method like that.

0

elmogallen created 9 years ago

That worked perfectly. I didn't realize I could just call arbitrary jquery. I thought I had to use angular directives or something.

Thanks! Dave

Have an answer to this question? Log in and write your answer.