AngularJs自動補完検索バーテキスト付きの画像を持つドロップダウンリスト

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

働いていると私は、各キーストロークで相対的な製品を検索することができますよ。

問題

私が代わりに画像自体のドロップダウンリスト内の画像のリンクを取得しています - 例 - ドロップダウンのentiresがこの=>

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

クエリのように見えます

ドロップダウンリストに名前が表示された商品の実際の画像をどのように取得できますか？

私は&を使ってみましたので、angucomplete-altをお薦めしません。このライブラリは角ひものタイプヘッドよりもはるかに低速です。また、私はそれらのリンク上に画像を持っているので、リンクは間違っていません。

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