Select 默认情况下 select 框中的第一个值 - AngularJS

Question

我有两个 select 盒子。第二个 select 框从第一个 select 框填充。

我已经为第二个 select 框应用了过滤器，以根据第一个 select 框中的选项 select 进行填充。第二个 select 框从数组 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;
        };
    });

现在我想要的是，每当第二个 select 框中的选项发生变化时，它的第一个选项应该默认 selected，即默认情况下，数组中的第一个选项应该是 select。

更新：

已更新 fiddle，已将 ng-if= reporttype !== '' 添加到第二个 select 框

FIDDLE

Answer 1

在你的控制器上，观察过滤后的选项并采取行动：

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

确保将过滤后的结果分配给 $scope 变量：

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

JSFIDDLE

Answer 2

试试这个：-

  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>

Select 默认情况下 select 框中的第一个值 - AngularJS

Select first value from select box by default - AngularJS

angularjs

angularjs-filter

angularjs-ng-options