默认情况下从选择框中选择第一个值 - 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

回答

相关问题