將默認選項添加到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

回答

相關問題