如何将图像放入下拉列表？

Question

我创建了一个bs-dropdown。在那我想要显示图像和文字。我能够从controller.js获取文本并显示它，但无法获取图像。请帮我解决这个问题。

<div bs-dropdown bs-dropdown-display="languageDropdown" bs-dropdown-items="lang" ng-model="language" name="language"></div>

这是我的controller.js

$scope.lang =  [ 
   "text1",
   "text2",
   "text3",
   "<img src='https://www.google.co.in/images/suitcase_icon.png'>"
];

Answer 1

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div ng-controller="AppController" ng-app="app">
  <form class="form" name="form" novalidate>
    <div class="btn-group" dropdown>
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li ng-repeat="option in lang">
          <a href="#" ng-style="{'background-image':'url({{option}})'}">{{option}}</a>
        </li>
        <li class="divider"></li>
      </ul>
    </div>
  </form>
</div>

使用Javascript：

angular.module('app', [
    'ui.bootstrap'
])

.controller('AppController',
    function($scope) {
      $scope.lang = [
        "text1",
        "text2",
        "text3",
     "https://www.google.com/images/errors/robot.png"
      ];
    }
);

CSS：

.dropdown-menu li:nth-last-child(2) a {
  text-indent: -999px;
  background-size: contain;
}