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

现在，如果我查看选择，我可以看到我的选项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'];

我怎样才能让它与这种设置一起使用？

由于

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>

的 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 for select将只包含一个值，即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>

AngularJS在选择

2 个答案: