默认情况下从选择框中选择第一个值 – AngularJS

2023年11月21日 173次阅读

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

我已经为第二个选择框应用了一个过滤器,以根据在第一个选择框中选择的选项进行填充.第二个选择框从数组填充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

最佳答案 在您的控制器上,观察已过滤的选项并对其执行操作：

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

点赞