将默认选项添加到 ng-if

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-model）：

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

否则，您没有理由不能使用空字符串完成此操作属性。例如，请参见代码段。

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

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

编辑： 如果您需要一个不会删除 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

Adding default option to ng-if

javascript

angularjs

data-binding

angular-ng-if