使用角度模块插入图片

Question

• 有没有办法用javascript和角度模块放一些图片？ 我需要在右侧显示对象的名称和图片。
  • 在哪里以及如何将包含我的图片位置的变量放入javascript代码？

html代码

<li class="animate-repeat" data-ng-repeat="object in objects | filter:q as results">
    [{{$index + 1}}] {{object.name}}
</li>

javascript代码

(function(angular) {
'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', 
function($scope) {
    $scope.objects = [
    {name:'obj1'},
    {name:'obj2'},
    {name:'obj3'},
    {name:'obj4'}
  ];
});
})(window.angular);

我正在尝试做这样的事情：

[{{$index + 1}}] {{object.name}} {{object.img}}

Answer 1

您可以使用<img>元素，并使用ng-src将图片网址绑定到图片的src属性。

<li class="animate-repeat" data-ng-repeat="object in objects | filter:q as results">
    [{{$index + 1}}] {{object.name}} <img data-ng-src="{{object.img}}" />
</li>

然后您的Javascript应该如下：

(function(angular) {
    'use strict';

    angular.module('ngRepeat', ['ngAnimate']).controller('repeatController',

        function($scope) {
            $scope.objects = [
                {name:'obj1', img: 'http://placehold.it/20'},
                {name:'obj2', img: 'http://placehold.it/20'},
                {name:'obj3', img: 'http://placehold.it/20'},
                {name:'obj4', img: 'http://placehold.it/20'}
            ];
        });
})(window.angular);

这是working fiddle。