AngularJS在选择时显示图像

AngularJS display image on select

本文关键字：显示图 图像 显示 选择 AngularJS      更新时间：2023-09-26

在我的主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'}
];

现在如果我看一下选择，我可以看到我的选项label1和label2。如果选择了其中一个，我想将主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'];

我怎样才能让它在这种设置下工作?

谢谢

试试这个方法

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

这是活塞。

已更新代码:

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。

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

使用ng-src作为图像源，并使用相同的模型值

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

请记住，用于select的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>
相关文章：