ng-ifにデフォルトオプションを追加する

ドロップダウンメニューには、小さいものと大きいものの2つのオプションがあります。小さいが選択されると、画像が表示されます。大きな画像を選択すると、別の画像が表示されます。何も選択されていないときのデフォルト画像を追加したい（例：ページがロードされたばかり）。しかし、下の私のコードは動作していません。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とする。、そうでない場合

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

：あなたがする必要がありますあなたの$scope.getUrl機能、のタイプミスがあったこの

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

を使用し、初期値として

$scope.size = 'default';

出典

2016-04-13 02:31:30 ariezona

をあなたのサイズのデフォルト値を定義することができます空の文字列プロパティでこれを達成できない理由はありません。たとえばスニペットを参照してください。

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>

EDIT：あなたがあなたのコメントにつき、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、それを更新しました。 –

ng-ifにデフォルトオプションを追加する

答えて

関連する問題