将默认选项添加到ng-if

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

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>

来源

2016-04-13 kevin_b

您需要定义默认值例如，尺寸为default。您可以使用此

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

，并定义尺寸默认值作为初始值

$scope.size = 'default';

来源

2016-04-13 02:31:30 ariezona

你在你的$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="[email protected]" data-semver="1.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]" 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="[email protected]" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.5.0" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script> 
 
    <script data-require="[email protected]" 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，因为它看起来像是你问题的实际问题 - 即使没有选定的大小，如何显示没有条件的图像。

来源

2016-04-13 02:49:00

这里的关键是你拿出ng-if。这可以完成而不会取出ng-if？ –

@jebmarcus，更新它，fwiw。 –

将默认选项添加到ng-if

回答

相关问题