javascript - 我怎样才能把图片放在 Angular 选择中？

Question

我想在我的选择选项中显示每个项目的图片。

这是一个 selectize 和 angular 的例子——如何在 selectize 中显示图片？

$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>

如果我有这个，如何传递图像？

Answer 1

您需要使用 custom rendering functions .每个函数都应接受两个参数:“data”和“escape”并返回具有单个根元素的 HTML(字符串)。 “转义”参数是一个接受字符串并转义所有特殊 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>