2016-05-19 8 views
0

入力フィールドは以下のように充填されている画像ロードする必要が生じたプログラム:表示画像の特定の入力角度JS

ファイルサイズフィールドを - 300×250または728×90 ファイル拡張子フィールド - GIF

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<body> 

<div ng-app="" ng-init="baseUrl='https://static.abc.com/images/test/'"> 

File name: input style="width:225px" ng-model="filename" value="{{filename}}"><br> 

File extension: input style="width:30px" ng-model="extension" value="{{extension}}"><br><br> 

<!-- Add code below this line --> 


</div> 

</body> 

結果を達成するためにコードをさらに考えることはできません。

+1

が解決策を見つけることに多くの努力を置く必要が使用してのwatchCollection

$scope.$watchCollection(['filename', 'extension'], function(newValues, oldValues){ // do what you want here }); 

例を使用しての

$scope.isShowImg = false 

例。 – charlietfl

答えて

0

角度は2つのスコープ方法$watchGroup(1.3以降)と$watchCollectionを提供します。

より一般的な解決策は、2つのモデルを見て、値が必要な値と一致するかどうかを確認してからイメージを表示することです。

$scope.$watch('[filename,extension]', function (newValue, oldValue) { 
    var new_filename = newValue[0]; 
    var new_extension = newValue[1]; 
    if(new_filename == '<what ever>' && new_extension == '<what ever>'){ 
     $scope.isShowImg = true; 
    } 
    else 
     $scope.isShowImg = false; 
}, true); 

画像タグには、isShowImgが適用されます。

<img src = "" ng-show="isShowImg" /> 

コントローラのロード時にisShowImgをfalseと宣言すると、ロード時に画像が表示されません。 watchGroup

$scope.$watchGroup(['filename', 'extension'], function(newValues, oldValues, scope) { 
    //do what you want here 
}); 
関連する問題