Question

在我的下拉菜单中，有两个选项 - 小和大。选择小时，会显示图片;选择大时，会显示另一张图片。我想在没有选择任何内容时添加默认图片（例如。刚刚加载的页面）。但我的下面的代码不起作用。

AngularJS，内部控制器：

var urls = {
    '': '/images/Default.png', // empty string doesn't work
    Small: '/images/Small.png',
    Large: '/images/Large.png'
};


$scope.getUrl = function (name) {   
    if (urls[name] !== undefined) return urls[name];
};

HTML（大小是绑定用户从下拉列表中选择的内容的ng模型）：

<div>
    <img ng-src="{{getUrl(size)}}" ng-if="size">
</div>

Answer 1

例如，您需要将尺寸的默认值定义为default。你可以用这个

var urls = {
  default: '/images/Default.png',
  Small: '/images/Small.png',
  Large: '/images/Large.png'
};

并将您的尺寸默认值定义为初始值

$scope.size = 'default';

Answer 2

您的$scope.getUrl函数中有一个拼写错误，应该是：

$scope.getUrl = function (name) {   
  // you had *if (url[name]*... here
  if (urls[name] !== undefined) return urls[name];
};

否则，没有理由用空字符串属性来完成此操作。例如，请参阅代码段。

＆＃13;

angular.module('app', ['ui.bootstrap'])
  .controller('MainCtrl', function($scope) {
    
    var urls = {
      '': 'http://placekitten.com/g/300/300', // empty string is working now                
      Small: 'http://placekitten.com/g/150/200',
      Large: 'http://placekitten.com/g/500/500'
    };
    
    $scope.sizes = ['Small', 'Large'];
    
    $scope.selectedSize = '';
    
    $scope.selectSize = function(idx) {
      $scope.selectedSize = $scope.sizes[idx];
    };
    
    $scope.getUrl = function (name) {   
      if (urls[name] !== undefined) return urls[name];
    };
    
  });

＆＃13;

<html ng-app="app">

  <head>
    <link data-require="angular.js@1.5.0" data-semver="1.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link data-require="angular.js@1.5.0" data-semver="1.5.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.4/ui-bootstrap-tpls.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div uib-dropdown>
      <button type="button"
              id="choose-size"
              class="choose-size-dropdown-button btn btn-info"
              uib-dropdown-toggle
              ng-disabled="disabled">
        <span ng-show="selectedSize === ''">
          Select size
        </span>
        <span ng-show="selectedSize !== ''">
          {{ selectedSize }}
        </span>
        <span class="caret"></span>

      </button>
      <ul uib-dropdown-menu
          class="choose-size-dropdown-list"
          role="menu"
          style="list-style-type:none"
          aria-labelledby="choose-size-dropdown-list">
        <li class="choose-size-dropdown-list-item"
            role="menuitem"
            style="cursor:pointer"
            ng-repeat="size in sizes track by $index">
          <a class="choose-size-dropdown-list-item-anchor"
             ng-click="selectSize($index)">
              {{ size }}
          </a>
        </li>
      </ul>
    </div>
    <div class="selected-size-image">
      <img ng-src="{{getUrl(selectedSize)}}" />
    </div>
  </body>

</html>

＆＃13;

编辑：如果您需要的解决方案不会取消ng-if，根据您的评论，您可以这样做：

<div class="selected-size-image">
  <img ng-src="{{getUrl('')}}" ng-if="!selectedSize" />
  <img ng-src="{{getUrl(selectedSize)}}" ng-if="selectedSize" />
</div>

我拿出了ng-if因为看起来你的问题实际上就是这样 - 即使没有选定的尺寸，如何无条件地显示图像。

将默认选项添加到ng-if

2 个答案: