デフォルトで選択ボックスから最初の値を選択 - AngularJS

2つの選択ボックスがあります。 2番目の選択ボックスは、最初の選択ボックスから入力されます。デフォルトで選択ボックスから最初の値を選択 - AngularJS

最初の選択ボックスで選択したオプションに応じて、2番目の選択ボックスにフィルタを適用しました。第2の選択ボックスは、アレイvar outputformats = [];

この私のコード

HTML

<select name="reporttype"id="reporttype" 
     ng-init="reporttype='1115'" 
     ng-model="reporttype"> 
    <option value="1115">Previous Day Composite Report</option> 
    <option value="1114">ACH Receive</option> 
</select> 


<select name="outputformat" id="outputformat" 
     ng-model="outputformat" 
     ng-options="format for format in outputformats | outputformatfilter: reporttype:this">  
</select> Value : {{outputformat}}

フィルター

angular.module('myApp.outputformatfilter',[]) 
    .filter('outputformatfilter', function() { 
     return function (input,selectedreport,scope) { 

      var outputFormatReport = {"1115":"HTML,PDF","1114":"CSV,EXCEL"}; 
      var outputformats = outputFormatReport[selectedreport].split(','); 

      return outputformats; 
     }; 
    });

は、今私が欲しいものを第2の選択ボックスの変更でいつでもオプションですから移入します最初のオプションはデフォルトでで選択する必要があります。これは配列shoulの最初のオプションですデフォルトで選択されています。

UPDATE：

更新フィドルは、第2のフィルタ処理されたオプションを見て、その上で動作し、あなたのコントローラでボックス

FIDDLE

出典

2016-08-12 Nishant123

を選択しng-if= reporttype !== ''を追加しました：

function myController ($scope) { 
    // watch the filtered output formats 
    $scope.$watchCollection("filteredOutputFormats", function(val) { 
     // select the first one when it changes 
     $scope.outputformat = val[0]; 
    }); 
}

これを試してみてください

<select name="outputformat" id="outputformat" 
     ng-model="outputformat" 
     ng-options="format for format in filteredOutputFormats = (outputformats | outputformatfilter: reporttype:this)">   
</select>

JSFIDDLE

出典

2016-08-12 07:12:22 devqon

ちょっと私はちょうど 'NG-IFを=追加reporttype！== '' 'それは動作していません。なぜそれが動作していないのか、それを動作させるために何をすればいいのか教えてください https://jsfiddle.net/Kunalh/bt99eg1o/7/ – Nishant123

最初のドロップダウンでは、ng-init = "reporttype = '1115''なので'' 'ではない – devqon

はい、最初のボックスをチェックして空の値を持たないようにしたい場合は、2番目のドロップダウンを表示しないでください。あなたのソリューションに影響するのはなぜですか？質問は更新されました。 – Nishant123

：あなたは$スコープ変数にフィルタリングされた結果を割り当ててください -

var myApp = angular.module('myApp',['myApp.outputformatfilter']); 
 

 
myApp.controller('mainController',function($scope,$filter){ 
 
    var outputformats = []; 
 
    $scope.outputFormatReport = {"1115":"HTML,PDF,CSV,EXCEL","1114":"PHP,HTML,PDF","default":"CSV,HTML"}; 
 
    $scope.$watch('reporttype', function (newValue, oldValue, scope) { 
 
     outputformats = $scope.outputFormatReport[newValue].split(','); 
 
      $scope.outputformat=outputformats[0] 
 
     }); 
 
}); 
 

 
angular.module('myApp.outputformatfilter',[]).filter('outputformatfilter', function() { 
 
      return function (input,selectedreport,scope) { 
 
      console.log('input is '+input+' \nReport is '+selectedreport); 
 
      console.log(scope.outputFormatReport); 
 
      if(selectedreport!= undefined){ 
 
       var outputformats =    
 
       console.log(scope.outputFormatReport[selectedreport]); 
 
       outputformats = scope.outputFormatReport[selectedreport].split(','); 
 
      
 
       console.log(outputformats); 
 
      }else{ 
 
       return {}; 
 
      } 
 
       
 
      return outputformats; 
 
      }; 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
<div ng-controller="mainController"> 
 

 
<select name="reporttype"id="reporttype" ng-init="reporttype='1115'" ng-model="reporttype"> 
 
       <option value="1115">Previous Day Composite Report</option> 
 
       <option value="1114">ACH Receive</option> 
 
       </select> 
 
<select name="outputformat" id="outputformat" ng-model="outputformat" ng-options="format for format in outputformats | outputformatfilter: reporttype:this">  
 
       </select> Value : {{outputformat}} 
 

 
</div> 
 

 
</body>

出典

2016-08-12 07:22:16

デフォルトで選択ボックスから最初の値を選択 - AngularJS

答えて

関連する問題