There are two images to choose from, and based on your selection using ng-click, the class changes. When moving on to the next step, a new object is created to store references to the selected image:
$scope.cabinetDetails.cabinetType = {
name: $scope.currentElement.obj.name,
image: $scope.currentElement.obj.image,
ref: $scope.currentElement
};
The selected image can be accessed later through
$scope.cabinetDetails.cabinetType.refIf you need to go back to a previous step and want the previously selected image to appear as selected, you can do so by executing this code when loading the previous step:
if ($scope.cabinetDetails.cabinetType != null)
{
$scope.currentElement = $scope.cabinetDetails.cabinetType.ref;
}
To indicate which image is currently selected, the ng-repeat function checks for an active class defined in the ng-class attribute:
<div ng-repeat="obj in currentObject">
<div class="img-select" ng-click="setActive(this)" ng-class="{itemSelected : isActive(this)}">
<div align="center">
<img ng-src="resources/images/aventos/{{obj.image}}" />
</div>
<div class="img-title">{{obj.name}}</div>
</div>
</div>
The isActive() function simply compares elements to determine if they are selected:
$scope.isActive = function(element)
{
return $scope.currentElement === element;
}
If you experience issues with referencing, double-check your implementation for any errors.