選択オプション値のhtmlを入れるには？

Question

私はAngularJSを使ってウェブサイト用のVisual Composerのようなものを作っています。そのため、選択項目に選択した内容に応じてHTMLコードを追加して、オプションの値に各HTMLを置くが、私はそうする方法を見つけるcan't :(

これは私が何をしようとしたものです：

<select ng-model="product1.stars"> 
    <option value="<i class="fa fa-star"></i> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star-half-o"></i> 
      <i class="fa fa-star-o"></i>" > 
    </option> 
</select> 

これで私を助けてください!!!

に

Answer 1

一重引用符を使用すると、次のようになります。

<select ng-model="product1.stars"> 
    <option value='<i class="fa fa-star"></i> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star"></i> 
      <i class="fa fa-star-half-o"></i> 
      <i class="fa fa-star-o"></i>' > 
    </option> 
</select> 

Answer 2

DEMO on PLNKR

app.controller('SelectDemoCtrl', function($scope, $http) { 

    $scope.selectedIcon = 'Gear'; 
    $scope.icons = [ 
    {value: 'Gear', label: '<i class="fa fa-gear"></i> Gear'}, 
    {value: 'Globe', label: '<i class="fa fa-globe"></i> Globe'}, 
    {value: 'Heart', label: '<i class="fa fa-heart"></i> Heart'}, 
    {value: 'Camera', label: '<i class="fa fa-camera"></i> Camera'} 
    ]; 

}); 

JS

AngularStrap

HTML

<div class="bs-example" style="padding-bottom: 24px;" append-source> 

    <label>Single select:&nbsp;</label> 
    <button type="button" 
      class="btn btn-default" 
      ng-model="selectedIcon" 
      data-html="1" 
      bs-options="icon.value as icon.label for icon in icons" 
      bs-select> 
     Action <span class="caret"></span> 
    </button> 
    </div> 

からbs-selectとbs-optionsディレクティブを使用します