默认情况下从选择框中选择第一个值 - AngularJS答案

【问题标题】：Select first value from select box by default - AngularJS默认情况下从选择框中选择第一个值 - AngularJS
【发布时间】：2016-08-12 07:04:59
【问题描述】：

我有两个选择框。第二个选择框从第一个选择框填充。

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

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

更新：

更新小提琴，将ng-if= reporttype !== '' 添加到第二个选择框

FIDDLE

【问题讨论】：

标签： angularjs angularjs-filter angularjs-ng-options

【解决方案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

【讨论】：

嘿，我刚刚添加了一个ng-if =reporttype !== ''，但它不起作用。你能告诉我为什么它不工作吗？我应该怎么做才能让它工作jsfiddle.net/Kunalh/bt99eg1o/7
因为在第一个下拉列表中你有一个ng-init="reporttype='1115'，所以它不是''
是的，但我想检查第一个框是否有空值。如果是这样，则不要显示第二个下拉菜单。这只是一张支票。为什么它会影响您的解决方案？顺便更新了问题

【解决方案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>

【讨论】：