Question

我尝试使用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>

这是小提琴http://jsfiddle.net/RdNw4/6/

我在这里遗漏了任何代码吗？

Answer 1

将图像标记从languages数组中取出并重新编写模型，使语言看起来像：

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

然后更改标记以添加图像标记：

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

使用Angular Js将图像添加到列表项

1 个答案: