2016-05-18 9 views
1

私は各アイテムの画像を私の選択オプションに表示したいと思います。どのように角度で選択して画像を置くことができますか?

これは選択と角度の例です - どのようにして画像を選択して表示できますか?

$scope.myModel = 1; 

$scope.myOptions = [ 
    {id: 1, title: 'Spectrometer', img:'1.jpg'}, 
    {id: 2, title: 'Star Chart', img:'2.jpg'}, 
    {id: 3, title: 'Laser Pointer', img:'2.jpg'} 
]; 

$scope.myConfig = { 
    create: true, 
    valueField: 'id', 
    labelField: 'title', 
    delimiter: '|', 
    placeholder: 'Pick something', 
    onInitialize: function(selectize){ 
    // receives the selectize object as an argument 
    }, 
    // maxItems: 1 
}; 
<selectize config='myConfig' options='myOptions' ng-model="myModel"></selectize> 

もし私がこれを持っていたら、どのようにイメージを渡すことができますか?

答えて

2

custom rendering functionsを使用する必要があります。各関数は "data"と "escape"という2つの引数を受け取り、単一のルート要素でHTML(string)を返します。 "エスケープ"引数は、文字列をとり、すべての特殊なHTML文字をエスケープする関数です。

$scope.myModel = 1; 

$scope.myOptions = [ 
    {id: 1, title: 'Spectrometer', img:'1.jpg'}, 
    {id: 2, title: 'Star Chart', img:'2.jpg'}, 
    {id: 3, title: 'Laser Pointer', img:'2.jpg'} 
]; 

$scope.myConfig = { 
    create: true, 
    valueField: 'id', 
    labelField: 'title', 
    delimiter: '|', 
    placeholder: 'Pick something', 
    onInitialize: function(selectize){ 
    // receives the selectize object as an argument 
    }, 
    // maxItems: 1 

    //custom rendering functions for option & item : 
    render: { 
     option: function(item, escape) { 
     return '<div class="option">' + 
      '<img src="'+item.img+'" alt="'+scape(item.title)+'" height="42" width="42">' + 
      '<span>'+scape(item.title)+'</span>' + 
      '</div>'; 
     }, 
     item: function(item, escape) { 

     return '<div class="item">'+ 
     '<img src="'+item.img+'" alt="'+scape(item.title)+'" height="42" width="42">'+ 
     '+scape(item.title)+' + 
     '</div>'; 
     } 
    } 
}; 

<selectize config='myConfig' options='myOptions' ng-model="myModel"></selectize> 
:あなたはこのようにそれらを使用することができ、あなたの例では

関連する問題