Question

我需要使用包含图像和相应文本的选项来实现下拉列表，其中用户可以键入搜索查询，并且每个键击都会下拉列表更新。我使用Angular-Strap typeheads来实现此功能。

这是我的angularjs片段 -

$scope.productsDisplayed = $scope.allProducts.map(function(product, index) {
  return {
    value: product.Name,
    Name: product.Name,
    Brand: product.Brand,
    Image: product.Image,
    _id: product._id,
    label: "<img src = '" + product.Image + "'> " + product.Name
  }
});

这是我的html代码段 -

<input ng-model="selectedProduct" bs-options="product as product.label for product in productsDisplayed" placeholder="Enter Product Name" bs-typeahead type="text">

搜索工作正常，我可以使用每个击键搜索相关产品。

问题

我在下拉列表中获取图像的链接而不是图像本身 - Ex - Dropdown entires看起来像这样=＆gt;

<img src = '/test/image/upload/v0000000000/products/abcdefghi.jpg'> " + Deodrant

查询

如何在下拉列表中获取名称中产品的实际图像？

请不要建议angucomplete-alt，因为我已经尝试过使用它＆amp;发现与角带式打字头相比，库要慢得多。此外，我在这些链接上有图像，因此链接没有错误。

Answer 1

使用bs-options="image.value as image.label for image in images"

JS

  $scope.urls = { "Gear": 'https://dummyimage.com/100/000/f00.jpg&text=GEA',
                  "Globe": 'https://dummyimage.com/100/000/0f0.jpg&text=GLO',
                  "Heart": 'https://dummyimage.com/100/000/00f.jpg&text=HEA',
                  "Camera": 'https://dummyimage.com/100/000/fof.jpg&text=CAM'
  };

  $scope.selectedImage;
  $scope.images = [
    {value: 'Gear', label: '<img src="'+$scope.urls.Gear+'"> Gear'
    },
    {value: 'Globe', label: '<img src="'+$scope.urls.Globe+'"> Globe'
    },
    {value: 'Heart', label: '<img src="'+$scope.urls.Heart+'"> Heart'
    },
    {value: 'Camera', label: '<img src="'+$scope.urls.Camera+'"> Camera'
    }
  ];

HTML

<input type="text" 
       class="form-control"
       ng-model="selectedImage" 
       data-min-length="0" data-html="1" 
       data-auto-select="true" data-animation="am-flip-x" 
       bs-options="image.value as image.label for image in images" 
       placeholder="Enter image name" bs-typeahead>

DEMO on PLNKR

AngularJs自动完成搜索栏，下拉列表包含带文本的图像

1 个答案: