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>

ng-view顯示一個表單，對於imageHolder，我想基於表單中的選擇選項顯示動態圖像。

因此ng-view中的表單具有以下輸入

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

現在，如果我查看選擇，則可以看到我的選項標簽1和標簽2。 如果選擇其中之一，我想將主html文件中的圖像src設置為其作用域的值。

我怎樣才能做到這一點？

謝謝

更新我似乎無法使它正常工作，因為我的設置與我看到的示例不同。 例如，我沒有ng-controller。 相反，我有

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

如何使它與這種設置一起使用？

謝謝

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>

這是the 子 。

更新的代碼：

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>

還應在主模板中包含angular-route.js並放入DI的

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

Answer 2

使用ng-src作為圖像源，並使用您的模型值

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

請記住，您用於選擇的ng-model將僅包含一個值，即SELECTED值。

此外，如果您想對ng-src使用不同的值，則可以根據需要執行以下操作-查看更改模型此外，可以查看輸入模型進行更改，例如

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

參考： https : //docs.angularjs.org/api/ng/directive/ngSrc

編輯：由於原始問題已更新，我可以看到這些問題-您的控制器EmailViewCtrl已與partials/home.html模板綁定。 因此， home.html將有權訪問EmailViewCtrl的范圍變量。

因此，您必須使用ng-controller將控制器綁定到模板

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