Question

是否可以在角度JS UI

的打印头中的自动完成下拉列表中插入图像

Answer 1

是的，您可以使用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和图片网址（img）组成的JSON对象。

HTML模板使用匹配结果的img属性显示图像。要告诉typeahead使用模板，您可以使用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。

AngularUI中的typehead autocomplete中带有文本的图像

1 个答案: