AngularJS display image on select

Question

In my main html file I have the following.

<div class="row">
    <div class="col-md-6">
        <!--Here go the partials -->
        <div ng-view></div>
    </div>

    <div class="col-md-6">
        <div id="imageHolder">
            <img src="{{selectedItem}}">
        </div>
    </div>
</div>

ng-view displays a form and for imageHolder I wanted to display a dynamic image based on a select option from the form.

So the form in ng-view has the following input

<div class="form-group" ng-class="{ 'has-error': emailform.inputLinks.$invalid && emailform.inputLinks.$dirty }">
    <label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
    <div class="col-lg-8">
        <select class="form-control" ng-model="formData.inputLinks" data-ng-options="link.value as link.label for link in links" id="inputLinks" required>
            <option value="">Please select</option>
        </select>
    </div>
</div>

And then in my controller, I have

$scope.links =
[
    { label: 'label1', value: '/app/img/placeholder.jpg'},
    { label: 'label2', value:'/app/img/placeholder.jpg'}
];

Now if I look at the select, I can see my options label1 and label2. If one of these is select, I wanted to set the image src in my main html file to the value of its scope.

How could I achieve this?

Thanks

UPDATE I can't seem to get it to work because my set up is different to examples I see. For instance, I dont have an ng-controller. Instead, I have

<div class="container" ng-app="emailGeneratorApp">

<div class="row">
    <div class="col-md-6">
        <!--Here go the partials -->
        <div ng-view></div>
    </div>

    <div class="col-md-6">
        <div id="imageHolder">
            <img ng-src="{{formData.inputLinks}}">
        </div>
    </div>
</div>

</div>

And then I have a file app.js which is like

'use strict';


// Declare app level module which depends on filters, and services
angular.module('emailGeneratorApp', ['emailGeneratorApp.filters', 'emailGeneratorApp.services', 'emailGeneratorApp.directives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: EmailViewCtrl});
    $routeProvider.otherwise({redirectTo: '/home'});
  }]);

And finally controller.js is like

'use strict';

/* Controllers */

function EmailViewCtrl($scope, $http) {

    $scope.links =
    [
        { label: 'Email1', value: '/app/img/placeholder.jpg'},
        { label: 'Email2', value:'/app/img/placeholder.jpg'}
    ];

}

EmailViewCtrl.$inject = ['$scope', '$http'];

How can I get it to work with this kind of set up?

Thanks

RIYAJ KHAN · Accepted Answer · 2015-07-22 12:52:09Z

2

try this way.

use ng-change event on select

JS

$scope.getSelectedOpt = function(){ 

     $scope.selectedItem = $scope.formData.inputLinks;
  }

HTML

<select ng-change="getSelectedOpt()" class="form-control" ng-model="formData.inputLinks" data-ng-options="link.value as link.label for link in links" id="inputLinks" required>
              <option value="">Please select</option>
            </select>

Here is the plunker.

UPDATED CODE :

JS :

angular.module('emailGeneratorApp', ['ngRoute']).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'partials/home.html',
    controller: EmailViewCtrl
  });
  $routeProvider.otherwise({
    redirectTo: '/home'
  });
}])


function EmailViewCtrl($scope, $http,$rootScope) {


    $scope.getSelectedOpt = function(){ 
        $rootScope.inputLinks;
        $rootScope.inputLinks = $scope.formData.inputLinks;
  }

    $scope.links =
    [
        { label: 'Email1', value: '/app/img/placeholder.jpg'},
        { label: 'Email2', value:'/app/img/placeholder.jpg'}
    ];

}

EmailViewCtrl.$inject = ['$scope', '$http','$rootScope'];

HTML :

<div class="col-md-6">
        <div id="imageHolder">
            <img ng-src="{{inputLinks}}">
        </div>
    </div>

home.html

<select ng-change="getSelectedOpt()" class="form-control" ng-model="formData.inputLinks" data-ng-options="link.value as link.label for link in links" id="inputLinks" required>
              <option value="">Please select</option>
            </select>

Also include angular-route.js in your main template and put in DI of

angular.module('emailGeneratorApp', ['ngRoute']).

edited Jul 22, 2015 at 12:52

answered Jul 22, 2015 at 10:28

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

2 Comments

RIYAJ KHAN Over a year ago

Please accept it if it resolve your problem, so can close this question.

Nick Price Over a year ago

I updated my OP because I have not resolved the problem. I marked the answers up because they are helpful, but I am struggling to get it into my situation

Vishwajeet Vatharkar · Accepted Answer · 2015-07-22 11:10:10Z

1

Use ng-src for image source, and use your model value for the same

<img ng-src="{{formData.inputLinks}}">

Remember, your ng-model for select will contain only ONE value, the SELECTED value.

Furthermore, if you want to use some different value for ng-src, you can do something like this if needed- watching the model for change Furthermore, you can watch input model for change, like

$scope.$watchCollection('formData.inputLinks', function () {
        //or some other business logic to assign link value to selectedItem
        });

Reference : https://docs.angularjs.org/api/ng/directive/ngSrc

Edit : As the original question has been updated, I can see these problems - You controller EmailViewCtrl is bound with partials/home.html template. So, home.html would have access to the scope variables of EmailViewCtrl.

So, you've to bind your controller to your template by using ng-controller, like this

 <div id="imageHolder" ng-controller="EmailViewCtrl">
            <img ng-src="{{formData.inputLinks}}">
        </div>

edited Jul 22, 2015 at 11:10

answered Jul 22, 2015 at 10:37

Vishwajeet Vatharkar

1,2065 gold badges20 silver badges42 bronze badges

1 Comment

Nick Price Over a year ago

I am having problems getting it to work with my current set up. I have updated the OP to demonstrate what I mean. Thanks

Collectives™ on Stack Overflow

AngularJS display image on select

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related