AngularJs自動完成搜索欄與下拉列表具有圖像與文本

我需要實現一個下拉選項包含圖像和各自的文本，其中用戶可以鍵入搜索查詢，並與每個鍵敲下拉列表更新。我使用Angular-Strap typeheads來實現此功能。AngularJs自動完成搜索欄與下拉列表具有圖像與文本

這是我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因爲我已經嘗試過使用它&發現與斜角帶頭型相比，圖庫要慢得多。另外，我在這些鏈接上有圖片，所以鏈接沒有錯誤。

來源

2016-10-19 dumb_iam

請參考這個，好像一樣，你將得到更好的主意：https：//開頭plnkr .co/edit /？p =預覽 – Jigar7521

@JigarPrajapati謝謝，但你的鏈接去沒有與這篇文章有關的地方。它打開「你好Plunker」。 –

對不起，實際上錯誤的鏈接被粘貼，請參考這個權利之一：https://plnkr.co/edit/1EgIUSbg5qzZgsMEDptu?p=preview – Jigar7521

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

$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

來源

2016-11-28 03:01:09 georgeawg

AngularJs自動完成搜索欄與下拉列表具有圖像與文本

回答

相關問題