圖像與AngularUI

Question

文本typehead自動完成，纔有可能還插入圖像中自動完成下拉列表中的角JS UI

Answer 1

的typehead是的，你可以使用一個template做到這一點。

<script type="text/ng-template" id="customTemplate.html"> 
    <a> 
     <img ng-src="{{match.model.img}}" width="16"> {{match.model.name}} 
    </a> 
</script> 

結合到預輸入的數據如下：

$scope.results = [ 
    { 
    name: "California", 
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png" 
    }, { 
    name: "Delaware", 
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png" 
    }, { 
    name: "Florida", 
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png" 
    } 
]; 

每個結果是由一個name和圖像URL（img）的JSON對象。

HTML模板使用匹配結果的img屬性顯示圖像。告訴預輸入要使用的模板，你可以使用typeahead-template-url：

<input type="text" ng-model="query" class="form-control" typeahead="name as result.name for result in results | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" /> 

的工作示例見this Fiddle。