Access object properties from template to function - Angular

Question

Simply, I have an array of objects, [images], that I display perfectly fine on Ng-repeat. When I click one div, I want to see the 'id' property of the particular image that was clicked on in the template.

Function in controller:

angular.forEach(value, function (value, key) {
    $scope.images.push({
        id: i,
        src: ("data:image/jpeg;base64," + value)
    });
    i = i + 1;
}

$scope.seeOne = function () {
    console.log(image.id);
}

My template:

<div id="galscrolldiv" ng-repeat="image in images">
    <div ng-click="seeOne()">
        <img ng-src="{{images[$index].src}}" width="100%" />
    </div>
</div>

Tushar · Accepted Answer · 2015-09-09 03:54:29Z

2

Send the image as parameter from the view/template. Then you can access the image properties of the clicked image.

You've missed the ) of forEach.

Controller:

angular.forEach(value, function (value, key) {
    $scope.images.push({
        id: i,
        src: ("data:image/jpeg;base64," + value)
    });
    i = i + 1;
});

// Get the parameter i.e. image that is clicked
$scope.seeOne = function (image) {
    console.log(image.id);
};

View/Template:

<div id="galscrolldiv" ng-repeat="image in images">
    <div ng-click="seeOne(image)">
    <!--                  ^^^^^-->
        <img ng-src="{{images[$index].src}}" width="100%" />
    </div>
</div>

answered Sep 9, 2015 at 3:54

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

1 Comment

Alexsandra Guerra Over a year ago

Of course! I was overthinking it and forgetting this simple fact. Thank you!

intekhab · Accepted Answer · 2015-09-09 04:30:01Z

1

You can also send the $index property from template

<div id="galscrolldiv" ng-repeat="image in images">
    <div ng-click="seeOne($index)">
    <!--                  ^^^^^-->
        <img ng-src="{{images[$index].src}}" width="100%" />
    </div>
</div>

Then inside the controller

$scope.seeOne = function (index) {
    console.log($scope.images[index].id);
};

But this may cause issue while using filter. So in case of using filter avoid $index.

answered Sep 9, 2015 at 4:30

intekhab

1,6162 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Access object properties from template to function - Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related