具有两个图像的 UI 选择

Question

http://plnkr.co/edit/8Uks2e7tJ78Ax5bMbup2?p=preview

我想为每个项目添加两个图标。 我做这个：

<ui-select-choices repeat="lang in language_list">
<img ng-src="{{ lang.url }}" />
<img ng-src="{{ lang.url }}" />
<div ng-bind-html="lang.name | highlight: $select.search" style="display: inline"></div>
</ui-select-choices>

但是在选择该项后，所选控件中没有第二个图像。如何在其中获取两张图像？

Answer 1

我将这段代码添加到控制器中：

$scope.onSelected = function (selectedItem) {
//do selectedItem.PropertyName like selectedItem.Name or selectedItem.Key 
//whatever property your list has.
var result = document.getElementsByClassName("select2-chosen")[1];
var contentTr = angular.element('<img class="ng-scope" ng-src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png" src="https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png">');
if (angular.element(result).children().length > 2) {
angular.element(result).children()[0].remove();
}
var wrappedResult = angular.element(result).prepend(contentTr);
}

并添加了以下代码：

on-select="onSelected($item)"

到 UI 选择 HTML 作为属性。