0

I have created a bs-dropdown. In that I want to display images and text. I am able to fetch the text from controller.js and display it, but not able to fetch image. Please help me in solving this.

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

This is my controller.js

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

1 Answers1

0

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;
}

Outout