如何加载（和更新）URL 是两种形式之和的图像

Question

我正在尝试获取一个页面，您可以在其中获取基于两种形式的图像：当您进入该页面时，URL 是表格前两个条目的总和，但是当您更改它们，图像更新。

此代码在占位符

的标签中输出"undefinedundefined"

app.js

app.controller('dtbCtrl', function($scope, $http) {
  $scope.selected1 = '1';
  $scope.selected2 = '2';
  $scope.one = [
    {value: '1', label: '1'},
    {value: '2', label: '2'},
    {value: '3', label: '3'},
    {value: '4', label: '4'}
  ];
  $scope.two = [
    {value: '1', label: '1'},
    {value: '2', label: '2'},
    {value: '3', label: '3'}
  ];
  $scope.pic = 'http://www.placehold.it/1618x1000?text=' + $scope.one.label + $scope.two.value;
});

page.jade

  .title Title
  .thumbnail
    img.img-responsive(ng-src='{{pic}}')
    .caption
      .col-xs-12.col-sm-6.text-center
        label Label: 
        button.btn.btn-default.navbar-btn(type='button', ng-model='selectedOne', bs-options='one.value as one.label for pitch in ones', bs-select='')
          | Select 
          span.caret
      .col-xs-12.col-sm-6.text-center
        label Label: 
        button.btn.btn-default.navbar-btn(type='button', ng-model='selectedTwo', bs-options='two.value as two.label for two in twoes', bs-select='')
          | Select
          span.caret

这没有输出

page.jade

.content(ng-controller='dtbCtrl')
  .title Title
  .thumbnail
    img.img-responsive(ng-src='{{pic + one.value + two.value}}')

app.js

$scope.pic = 'http://www.placehold.it/1618x1000?text=';

Answer 1

您是要使用 selectedOne 而不是 one 吗？

img.img-responsive(ng-src='{{pic + selectedOne.value + selectedTwo.value}}')

如何加载（和更新）URL 是两种形式之和的图像

How to load (and update) an image whose URL is the sum of two forms

forms

binding

angularjs