Base solution for your next web application
Open Closed

Bootstrap Select #571

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="" class="selectpicker">
    <option ng-repeat="option in vm.promotions" value="{{}}">{{}}</option>

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.


  • 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="" 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>
    ... in the js: ...
                    couponMaintenanceService.getPromotions().success(function (result)
                        vm.promotions = result.items;

    How can I tell the selectpicker to update itself?

  • 0
    hikalkan created
    Support Team


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

        id: languageId
    }).success(function (result) {
        vm.languageNames = result.languageNames;
        setTimeout(function () {
        }, 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