I want to create a background image change upon an event (specifically a select option change) and I am having trouble getting the image path on my local environment.
My image path is in directory: http://localhost/webpage1/img/ with the image yellow.jpg
I've put an ng-style directive in my app (<div ng-controller="myCtrl" ng-style="style") and bind it with the controller:
app.controller('myCtrl', function($scope) {
$scope.options = [
{ type: 'yellow'},
{ type: 'green'}
];
//default image
$scope.subject = $scope.options[0].type;
$scope.image = $scope.subject + ".jpg";
$scope.style = {background: "url(" + $scope.image + ") no-repeat center center fixed"};
....
});
However I am stumped with retrieving the file path for my images. I don't want to list out the entire file path since it won't be the same once I put it live, so doing something like $scope.filepath = 'localhost/webpage1/img'; looks very messy and ugly.
Edit: My select options
<select ng-model="subject" name="subject" class="subject" >
<option ng-repeat="type in options">{{ type.type }}</option>
</select>