Question

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

这是选择和角度的一个例子 - 如何在选择中显示图片？

$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。每个函数都应该接受两个参数：＆＃34; data＆＃34;并且＆＃34;逃避＆＃34;并使用单个根元素返回HTML（字符串）。＆＃34;逃避＆＃34; argument是一个函数，它接受一个字符串并转义所有特殊的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>

如何将图片放入有角度的选择中？

1 个答案: