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, Feb 26 '16 at 21:07
I think [this question](http://stackoverflow.com/q/17884399/2435473) will help you — Pankaj Parkar, Feb 26 '16 at 21:09
@AlexMounir I have updated the question, I don't think that is the right way to bound though — OneMoreQuestion, Feb 26 '16 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, Feb 26 '16 at 21:22
@AlexMounir he did it with regular Javascript, I am trying to do it all in Angular — OneMoreQuestion, Feb 26 '16 at 21:24
@AlexMounir check out this fiddle: http://jsfiddle.net/Blackhole/a61pv1jr/ — OneMoreQuestion, Feb 26 '16 at 21:24

score 1 · Accepted Answer · answered Mar 01 '16 at 23:08

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)}}">

Rob · Answer 2 · 2016-02-26T21:35:35.220

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.

is there a way to do this with $scope? – OneMoreQuestion Feb 26 '16 at 21:55 — OneMoreQuestion, Feb 26 '16 at 21:55

Angular select display image with each option before submitting form

2 Answers2