Question

我有一个过滤器＆amp;我的固定标题中的搜索功能包括下拉列表（用于过滤器）和输入字段（用于搜索）。

对于下拉列表，我使用此Angularjs-dropdown-multiselect

目前，在提交请求后，用户将被定向到结果页面，并保留下拉列表和输入文本的模型内容以及我希望它如何。问题是，如果用户转到结果页以外的页面，我想重置模型（返回空）。

HTML：

<div class="col-sm-3">
    <div class="dropdown" ng-dropdown-multiselect="" options="cats" selected-model="catModel" checkboxes="true" translation-texts="{buttonDefaultText: 'Categories'}"></div>
</div>

<div class="col-sm-3">
    <div class="dropdown" ng-dropdown-multiselect="" options="ccs" selected-model="ccModel" checkboxes="true" translation-texts="{buttonDefaultText: 'Credit Cards'}"></div>
</div>

<div class="col-sm-6">
    <form data-ng-submit="findValue(catModel, ccModel, keyword)" >
        <div class="input-group search-bar">
            <input type="search" class="form-control" placeholder="Search for..." data-ng-model="keyword">
            <span class="input-group-btn">
                <button class="btn btn-search" type="button" data-ng-click="findValue(catModel, ccModel, keyword)"><img src="img/icon_search.png" alt="Search" /></button>
            </span>
            <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
        </div>
    </form>                 
</div>

JS：

.controller('mainController', ['$scope', '$http', '$location', 'dataFactory',
function ($scope, $http, $location, dataFactory){
    dataFactory.getCategories().success(function (data){
        $scope.cats = data;
    });

    dataFactory.getCcs().success(function (data){
        $scope.ccs = data;
    });
    $scope.catModel = [];
    $scope.ccModel = [];

    $scope.findValue = function(catModel, ccModel, keyword) {   
    var searchUrl = baseUrl;
    var catID = '';     
    if(catModel.length > 0) {
        searchUrl += 'categoryID=';
        angular.forEach(catModel, function(value, key) {
            if(key < catModel.length - 1) {
                searchUrl += value.id + ',';
                catID += value.id + ',';
            } else {
                searchUrl += value.id;
                catID += value.id;
            }
        })  
        if(ccModel.length > 0 | keyword != null) {
            searchUrl += '&';   
        }              
    } 

    if(ccModel.length > 0) {
        searchUrl += 'ccID=';
        angular.forEach(ccModel, function(value, key) {
            if(key < ccModel.length - 1) {
                searchUrl += value.id + ',';
            } else {
                searchUrl += value.id;
            }
        })
        if(keyword != null) {
            searchUrl += '&';
        }                
    } 

    if(keyword != null) {
        searchUrl += 'search_keyword=' + keyword; 
    }

    $http.get(searchUrl).success(function (data) {
        $scope.results = data;
        $scope.pageTitle = 'Promotions search result';
        $location.path('/promotion');
    })
}
}

我将模型和函数放在mainController中，因为标题位于每个视图中。

我在AngularJS和编程方面都很新，所以这段代码可能不太合适，请告诉我是否有更简单正确的方法。任何帮助表示赞赏。谢谢

Answer 1

您可以订阅将在每次更改位置时触发的以下事件$locationChangeSuccess。在里面你可以重置你的模型。

只需声明

$rootScope.$on('$locationChangeSuccess', function() {
   //reset your model here
});

改变路线时AngularJS清晰模型

1 个答案: