AngularJS отображаемое изображение по выбору

Question

В моем основном html-файле у меня есть следующее.

<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> 

нг-вид отображает форму и imageHolder Я хотел, чтобы отобразить динамическое изображение на основе выбора опции из формы.

Таким образом, форма в нг-зрения имеет следующий вход

<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> 

А потом в мой контроллер, я

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

Теперь, если я смотрю на выбор, я могу видеть мои варианты label1 и label2. Если один из них выбран, я хотел установить изображение src в моем главном html-файле на значение его области.

Как я мог достичь этого?

Благодаря

UPDATE Я не могу показаться, чтобы заставить его работать, потому что мой набор вверх отличается от примеров, которые я вижу. Например, у меня нет ng-контроллера. Вместо этого, у меня есть

<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> 

А потом у меня есть файл app.js, который является как

'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'}); 
    }]); 

И, наконец, controller.js, как

'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']; 

Как я могу получить его работать с подобным набором?

Thanks

Answer 1

попробуйте этот способ.

использование ng-change событием выберите

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> 

Вот plunker.

ОБНОВЛЕНО КОД:

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> 

домой.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> 

включают также angular-route.js в основной шаблон и поместить в DI из

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

Answer 2

Использование ng-src для источника изображения, и использовать значение модели для того же

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

Запомнить , ваша ng-модель для select будет содержать только одно значение, значение SELECTED.

Кроме того, если вы хотите использовать какое-то другое значение для нг-Src, вы можете сделать что-то вроде этого, если needed- наблюдая модель изменения Кроме того, вы можете наблюдать входную модель для изменения, как

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

Ссылка: https://docs.angularjs.org/api/ng/directive/ngSrc

Edit: Как первоначальный вопрос был обновлен, я могу видеть эти проблемы - вас контроллер EmailViewCtrl привязывается с partials/home.html шаблоном. Таким образом, home.html будет иметь доступ к переменным области видимости EmailViewCtrl.

Итак, вы, чтобы связать контроллер для шаблона с помощью ng-controller, как этот

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