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

Answer 1

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']).

Answer 2

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>