Base solution for your next web application
Open Closed

Bootstrap Select #571


0
elmogallen created

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

    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

  • 0
    elmogallen created

    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?

  • 0
    hikalkan created
    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

    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