All geek questions in one place

Select the first value from the default selection box - AngularJS

I have two rectangles. The second selection block is populated from the first selection window.

I applied a filter to the second selection box to fill in according to the options selected in the first selection box. The second selection block is populated from the arrayvar outputformats = [];

This is my code.

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}}

Filter

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;
        };
    });

Now, what I want, when the parameters per second of the selected box changes, its first option should be selected by default , that is, the first option from the array should be selected by default.

UPDATE :

Updated script, added ng-if= reporttype !== ''to the second selection block

Fiddle

+4
2

:

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

0

: -

  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>
Hide result
0

Source: https://habr.com/ru/post/1651009/

More articles:


All Articles