如何将 angular 数组项传递给 Fabricjs 的另一个函数图像

Question

我的控制器中有一个数组，如

$scope.image = [
{name: 'img1'},
{name: 'img2'},
{name: 'img3'},
{name: 'img4'},
{name: 'img5'},
...
]

我让它像

一样显示在 html 中

<a href=""><img ng-repeat="img in images" src="assets/img/{{ img.name }}" width="50"><span ng-click="anyImage()" ></span></a>

我的控制器中有另一个功能，我希望能够将 img.name 值传递给该功能，所以我的问题是我该怎么做？

另一个函数看起来像

$scope.anyImage = function(){
    fabric.Image.fromURL(image.name, function(oImg){
    });
};

Answer 1

您需要从

更新您的 ng-click

ng-click="anyImage()"

到

ng-click="anyImage(img.name)"

并将函数绑定更新为

$scope.anyImage = function(name){

Answer 2

您需要将 ng-repeat 放在 div 中以包含图像和跨度，按照您的方式它只重复图像而不重复跨度。

这是一个JSFiddle

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <div ng-repeat="img in images">
        <img  src="{{ img.name }}" width="50" />
        <span ng-click="anyImage(img.name)" >click</span>
    </div>
</div>

JS:

angular.module('myApp', [])
    .controller('dummy', ['$scope', function ($scope) {

    $scope.images = [{
        name: 'http://wallpaperswide.com/download/summer_scenery-wallpaper-800x600.jpg',
    }, {
        name: 'http://wallpaperswide.com/download/wheat_ears-wallpaper-800x600.jpg'
    } ];

    $scope.anyImage = function (image) {
        console.log(image);
    };
}]);

PS 我更改了名称以显示某些内容，我在要单击的 span 中添加了 hello 文本

如何将 angular 数组项传递给 Fabricjs 的另一个函数图像

how to pass angular array item into another function Image for Fabricjs

html

javascript

fabricjs

angularjs