默認情況下從選擇框中選擇第一個值 - AngularJS

我有兩個選擇框。第二個選擇框從第一個選擇框中填充。默認情況下從選擇框中選擇第一個值 - AngularJS

我已經爲第二個選擇框應用了一個過濾器，以根據在第一個選擇框中選擇的選項進行填充。第二個選擇框從數組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; 
     }; 
    });

現在我想的是，只要在第二個選擇框的變化選項，它的第一個選項應該是默認選擇，這是陣列的第一個選項， d被默認選中。

UPDATE：

更新小提琴，加入ng-if= reporttype !== ''第二選擇框中

FIDDLE

來源

2016-08-12 Nishant123

在您的控制器，觀看了過濾選項和行爲：

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

是的，但我想檢查第一個框中沒有空值，如果是，則不顯示第二個下拉菜單。爲什麼它影響你的解決方案？更新了問題btw – 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

回答

相關問題