Version 1.2.6: Can ngOptions have custom HTML like the example using ngRepeat?

[zhenghao1]

Using 1.2.6, can we have custom HTML content with the use of ngOptions? I was using ngRepeat for custom HTML content, however, I had problems with Angular expressions within the option like:

<select class="nya-selectpicker" multiple data-container="body" data-size="6" ng-model="logs">
    <option ng-repeat="option in log_types" value="{{option}}" data-content="<span>{{option.k}}&nbsp;<i ng-if="option.v.realtime" class='icon-time'></i></span>">{{option.k}}</option>
</select>

As you can see above, I want to only display the icon when option.v.realtime is true. However, option.v.realtime doesn't get parsed.

I know the new version allows for custom HTML however, because I'm doing something special with the dropdown (it's hacky), it's preventing me from using it properly. But if the old version really won't fit my needs, then I'd just have to use the new one.

[lordfriend]

expression in data-content should be parsed when using ngRepeat to generate the <option>. but directive in attribute value won't be compiled because its not an element during the compile and link phase. Only after Bootstrap-select create an dropdown using generated option, it is an element. but it is out of the compile and link phase. so angular will not compile this direcitve.

Because the ngOptions take over all the job to generate option. You cannot customize their attribute.

It is highly recommend you using the new version of this project. custom html is very easy with the new version.

[zhenghao1]

Thank you for your response. The thing is, I was using the new version initially, but then I got into a problem with my hacky approach (there was no problem when I use the hacky approach with the old version). Maybe you can help me.

For the above multiple select, I have a requirement to display the dropdown menu in three columns & vertically sorted. So what I did was to increase the width of the ul.dropdown-menu to 660px and force all li to 210px wide and float left. Then I sort the log_types array alphabetically and run it through a function such that if I were to run ng-repeat it over 3 columns I'd get (ignore the table-header bold text):

A	D	G
B	E
C	F

So my hack would have to remove the two empty <a> elements embedded within the empty <li>. Currently I'm employing a jQuery hack whenever the user clicks on the dropdown button.However this approach causes the dropdown to only open after clciking twice on the button.

function hack() {
  // Let's assume there's only one nya-select in the entire page
  var $el = $('ol.nya-bs-select');
  $timeout(function() {
    $el.find("button").on("click", function(event) {
      var emptySpans = $el.find("a span").filter(function(index, value) {
        return /^empty/.test($(value).text());
      });

      // Remove the <a> elements in closest <li>
      for(var i=0;i<emptySpans.length;i++) {
        var closestLi = $(emptySpans[i]).closest('li');
        closestLi.children().remove().css("cursor", "auto");
      }
    });
  });
}

[lordfriend]

Maybe You should use the original Bootstrap-select jquery plugin to achieve the hacky way.