Add image to list items using Angular Js

Question

I'm trying to add country image along with language using Angular JS.

<div ng-app class="nav">
<div></div>
<div ng-controller="MainController">
    {{selectedValue}}
    <ul>
        <li ng-repeat="lang in languages"><a ng-class="{selected: lang==selectedValue}" ng-click="changeSelectedValue(lang)" href="#">{{lang}}</a></li>
    </ul>  

</div>
</div>

<script>
function MainController($scope) {
$scope.languages = ['<img></img>English','Espanol', 'Française', 'Italian'];
    $scope.selectedValue = 'English';

    $scope.changeSelectedValue = function(lang) {
        $scope.selectedValue = lang;
    }
}
</script>

Here is the fiddle http://jsfiddle.net/RdNw4/6/

Am I missing any code here?

Mike Aski · Accepted Answer · 2015-08-31 10:51:12Z

1

Take the image tag out of the languages array and rework your model so that the languages look something like:

$scope.languages = [ { name: 'English', image: '/images/english.png' },
    { name: 'Espanol', image: '/images/espanol.png' }
    etc.
];

Then change your markup to add an image tag:

<ul>
    <li ng-repeat="lang in languages">
        <img ng-src='{{lang.image}}' /> //for correct url
        <a ng-class="{selected: lang==selectedValue}" href="#">{{lang.name}}</a>
    </li>
</ul>

edited Aug 31, 2015 at 10:51

Mike Aski

9,2364 gold badges48 silver badges66 bronze badges

answered Jan 18, 2014 at 9:50

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add image to list items using Angular Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related