Angular select display image with each option before submitting form

Question

Update: Solved! Please see my answer below.

I am trying to display a different image with each select option in Angular. As a user clicks on each option in a menu, a different image appears next to the menu. All of this is before the form is submitted. Basically trying to do what is done here in this fiddle, but in Angular: http://jsfiddle.net/treyh/xf2pq/

html:

Current image: {{myCar.url}}
<br>
<select ng-model="myCar" class="form-control">
    <option value="">Choose a car...</option>
    <option ng-repeat="car in cars" value="{{car}}" data-image = "{{car.url}}">{{car.label}}</option>
</select>

in the js file, inside the controller:

$scope.cars = [
    {url: 'Volvo.png', label: 'Volvo'}, 
    {url: 'Benz.png', label: 'Benz'}, 
    {url: 'JohnDeer.png', label: 'John Deer'}, 
    {url: 'BMW.png', label: 'BMW'}, 
];

Where is the image element in the html that is bound to the url on the ng-src? — Alex Mounir
– Alex Mounir, Commented Feb 26, 2016 at 21:07
@AlexMounir I have updated the question, I don't think that is the right way to bound though — OneMoreQuestion
– OneMoreQuestion, Commented Feb 26, 2016 at 21:21
how else would you show the image? this is what he does in the example you gave, he changes the src of the image element with the change in the select — Alex Mounir
– Alex Mounir, Commented Feb 26, 2016 at 21:22

OneMoreQuestion · Accepted Answer · 2016-03-01 23:08:34Z

1

I have figured out how to do this using ng-repeat and $Scope.

in the js file, inside the controller:

$scope.cars = ['Volvo', 'Benz', 'Toyota'];

$scope.myCar = "";

var carURL = {
     Volvo: 'volvo.png',
     Benz: 'benz.png',
     Toyota: 'toyota.png'
};

$scope.getCarURL = function(brand) {
     return carURL[brand];
}

and in the html:

<select ng-model="myCar">
    <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
</select>

<img ng-src="{{getCarUrl(myCar)}}">

answered Mar 1, 2016 at 23:08

OneMoreQuestion

1,7534 gold badges25 silver badges51 bronze badges

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

Comments

Rob · Accepted Answer · 2016-02-26 21:35:35Z

0

Select inputs in Angular are a bit confusing at first, but here is one way to set it up.

angular
    .module('app',[])
    .controller('AppCtrl',AppCtrl);


function AppCtrl() {
    var vm = this;

    vm.car_image = null;
    vm.cars = [
        {
            'url':'audi.jpg',
            'name':'Audi'
        },
        {
            'url':'bmw.jpg',
            'name':'BMW'
        }
    ]
}

<div ng-controller="AppCtrl as ctrl">
  <select ng-model="ctrl.car_image" ng-options="c.url as c.name for c in ctrl.cars" class="form-control"></select>
  <hr>
  <img ng-src="images/{{ctrl.car_image}}" ng-show="ctrl.car_image">
</div>

Using ng-src will prevent a 404 error initially when the page loads. So when you select the option you need, the ng-model from the select input is applied to the image tag.

edited Feb 26, 2016 at 21:35

answered Feb 26, 2016 at 21:25

Rob

1,8502 gold badges12 silver badges19 bronze badges

1 Comment

OneMoreQuestion Over a year ago

is there a way to do this with $scope?

Collectives™ on Stack Overflow

Angular select display image with each option before submitting form

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related