javascript - 将多个 ng-options 输入一起重置为默认值

Question

我有一个搜索，它根据多个选择输入过滤存储为 JSON 数据的产品，这些输入将它们的值存储为范围变量(3 个使用 ng-options 输出，1 个硬编码)。

我有一个“清除过滤器”按钮，可以重置为过滤器存储的变量，但是当我尝试同时将输入重置为其默认值时，只有一些重置。如果只选择了一个过滤器，它将始终重置。

HTML:

<div class="form-group">
    <select ng-options="loc as loc.name for loc in yachtLocations | filter:{parent:0}:true"  class="form-control" ng-model="nameRegion" ng-change="updateRegionValues(nameRegion, 'yachts')">
        <option value="">Select Region</option>
    </select>
</div>

<div class="form-group">
        <select ng-options="loc as loc.name for loc in yachtLocations | filter:filterCountries"  class="form-control"  ng-model="nameCountry" ng-change="updateCountryValues(nameCountry, 'yachts')">
            <option value="">Select Country</option>
        </select>
</div>
<div class="form-group">
    <select ng-options="loc as loc.name for loc in yachtLocations | filter:filterDest"  class="form-control"  ng-model="namePort" ng-change="updateDestValues(namePort, 'yachts')">
        <option value="">Select Port</option>
    </select>
</div>
<div class="form-group">
    <select class="form-control" ng-model="valueType" ng-change="updateTypeValues(valueType, 'yachts')">
        <option value="">Vessel Type</option>
        <option value="20">Motor</option>
        <option value="19">Sail</option>
    </select>
</div>

<a class="clearFilters" ng-show="emptyFilters()" ng-click="resetValues()">Clear Filters</a>

相关JS:

totApp.controller('mainController',['$scope', '$filter', function ($scope, $filter){
$scope.yachts = yachts;
$scope.superyachts = superyachts;
$scope.motorboats = motorboats;
$scope.yachtLocations = yachtLocations;
$scope.superYachtTenderLocations = superYachtTenderLocations;
$scope.motorBoatLocations = motorBoatLocations;
$scope.type = null;

$scope.loc = {
    region : { name : '', id : null },
    country : { name : '', id : null, children : 0 },
    dest : { name : '', id : null }
}

$scope.updateRegionValues = function($value, $type) {

    if ($value == null) {
        $scope.loc.region.name = '';
        $scope.loc.region.id = null;
        $scope.loc.country.name = '';
        $scope.loc.country.id = null;
        $scope.loc.country.children = 0;
        $scope.loc.dest.name = '';
        $scope.loc.dest.id = null;
    } 
    else {
        var termID = $value.term_id;
        $scope.changeRegion(termID, $type);
        $scope.showAllItems($type);
    }       
}


$scope.updateCountryValues = function($value, $type) {
    if ($value == null) {
        $scope.loc.country.name = '';
        $scope.loc.country.id = null;
        $scope.loc.country.children = 0;
        $scope.loc.dest.name = '';
        $scope.loc.dest.id = null;
    } 
    else {
        var termID = $value.term_id;
        var children = $value.children
        $scope.changeCountry(termID, children, $type);
        $scope.showAllItems($type);
    }       
}

$scope.updateDestValues = function($value, $type) {
    if ($value == null) {
        $scope.loc.dest.name = '';
        $scope.loc.dest.id = null;
    } 
    else {
        var termID = $value.term_id;
        $scope.changeDest(termID, $type);
        $scope.showAllItems($type);
    }       
}

$scope.updateTypeValues = function($value, $boat) {
    if ($value == null) {
        $scope.type = null;
    }
    else {
        $scope.updateType(parseInt($value));
        $scope.showAllItems($boat);
    }   
}

$scope.resetValues = function() {
    $scope.pagesShown = 1;
    $scope.loc.region.name = '';
    $scope.loc.region.id = null;
    $scope.loc.country.name = '';
    $scope.loc.country.id = null;
    $scope.loc.country.children = 0;
    $scope.loc.dest.name = '';
    $scope.loc.dest.id = null;
    $scope.type = null;
}

$scope.updateType = function($value) {
    $scope.type = $value;
}

//Same function for scope.loc.country and scope.loc.dest
//code using $type edited out
$scope.changeRegion = function( id, $type ){
    $scope.loc.region.id = id;
    }
}

我试过用

<option ng-selected="this.loc.dest.id == null" value="">Select Port</option>

(每个选项的每个相关范围变量都相同) 还有

$('.form-control').val("");

和

$('.form-control').prop("selectedIndex", 0);

在 $scope.resetValues 函数的底部。所有这些解决方案都会产生相同的结果——一个或两个 <select>除非只有一个被更改，否则 s 将被重置。

------------编辑------------

忘记包含过滤器。

$scope.filterCountries = function($country) {
    if ($scope.loc.region.id != null) {
        return $country.parent == $scope.loc.region.id;
    }
    else {
        var parents = new Array();
        var location;


            location = $scope.yachtLocations;


        angular.forEach(location, function(location){
            if (location.parent == 0) {
                parents.push(location.term_id);
            }
        });

        return parents.includes($country.parent);
    }
}

$scope.filterDest = function($dest) {

    if($scope.loc.country.id != null) {
        return $dest.parent == $scope.loc.country.id;
    }

    else {
        var parents = new Array();
        var moreparents = new Array();
        var location;

        location = $scope.yachtLocations;

        angular.forEach(location, function(location){
            if (location.parent == 0) {
                parents.push(location.term_id);
            }
        });

        angular.forEach(location, function(location){
            if (parents.includes(location.parent)) {
                moreparents.push(location.term_id);
            }
        });

        return moreparents.includes($dest.parent);

    }
}

Answer 1

您要重置的是 ng-model 值。如果您将代码更改为此，它应该可以工作:

$scope.resetValues = function() {
    $scope.nameRegion = ''; //Default value here
    $scope.nameCountry = '';//Default value here
    $scope.namePort = '';//Default value here
    $scope.valueType = '';//Default value here
}