Base solution for your next web application
Open Closed

Bootstrap Select #571

User avatar
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

Go to accepted answer
4 Answer(s)
  • User Avatar
    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

  • User Avatar
    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?

  • User Avatar
    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.

  • User Avatar
    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

Assignee
No one
Labels
Non yet