表格下拉列表不显示里程选项

时间:2018-11-07 22:17:02

标签: angularjs

我有一个表单,用户可以输入邮政编码和距离半径(这是一个下拉列表),或者可以选择基于城市的外观。在控制器中,对于英里,我具有以下值:

$scope.miles =  [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }];

这是我的下拉菜单:

<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" id="miles"></select>

我遇到的问题是,如果用户决定根据城市查找,默认情况下,根据我的范围,值为5。我的问题是,当用户根据城市查找时,默认值如何不适用。

以下是我正在寻找结果的方法。

$scope.SearchProvider = function(searchParam){
        console.log(searchParam,"<--initial search params");
        try{
            $scope.searchMode = 1;
            var queryString='';
            if($scope.formModel && $scope.formModel !== searchParam){
                $scope.resultsCount = 0;
                currentPage = 1;
            }
            if(searchParam){
                $scope.formModel = searchParam;
                for(var param in searchParam){
                    if(searchParam.hasOwnProperty(param)){
                        var paramValue = searchParam[param].value ? searchParam[param].value.trim() : searchParam[param].trim();
                        console.log(paramValue, "<--param after");
                        if (paramValue.length)
                            queryString += param + '=' + paramValue + '&';
                    }
                }
            }
            //debugger;
            console.log(queryString, "<--qstring");
            queryString= '?' + queryString + 'currentpage=' + $scope.currentPage;

            $http.get("/remote/ReturnProvidersList.cfm" + queryString)
            .then(function(response){
                $scope.providers = response.data.provider;
                $scope.resultsCount = response.data.rowCount;
                if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) ||
                    navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/) ||
                    navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/ZuneWP7/i) || navigator.userAgent.match(/SAMSUNG|SGH-[I|N|T]|GT-[I|P|N]|SM-[N|P|T|Z|G]|SHV-E|SCH-[I|J|R|S]|SPH-L/i)) {
                    if (!$scope.providers) {
                        $scope.NoResults = true;
                        $scope.ShowResults = false;
                        $scope.ShowDesc = false;

                        $scope.goToError();
                    }
                    else {
                        $scope.NoResults = false;
                        $scope.ShowResults = true;
                        $scope.ShowDesc = false;

                        $scope.goToResults();
                    }
                }
                else{
                    if (!$scope.providers){
                        $scope.NoResults = true;
                        $scope.ShowResults = false;
                        $scope.ShowDesc = false;
                    }
                        else {
                        $scope.NoResults = false;
                        $scope.ShowResults = true;
                        $scope.ShowDesc = false;
                    }
                }
            })
        }
        catch(err){ alert('No response: ' + err.message); }
    }

以下是我的控制器:

我认为在范围内添加“ {'value':”} ”可以解决此问题。但是,我收到以下错误“无响应:searchParam [param] .trim不是函数”

function(){
var $scope, $location, $anchorScroll;
var indexApp = angular.module('indexApp',['ui.bootstrap', 'ngSanitize']);

indexApp.controller('IndexController',function($scope,$http,$location,$anchorScroll,anchorSmoothScroll){
    $scope.Lang = 'initVal';
    $scope.ShowResults = false;
    $scope.ShowDesc = true;
    $scope.NoResults = false;
    $scope.currentPage = 1;
    $scope.maxPageNumbersToShow = 10;
    $scope.formModel = {};
    $scope.searchMode = 0;
    $scope.miles =  [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }];
    $scope.Specialties = [{'value':'Family practice'},{'value':'General practice'},{'value':'Internal medicine'},{'value':'Pediatrics'}];
    $scope.Gender = [{'value':'Male'},{'value':'Female'}];
    //$scope.Languages = {};
    $scope.Cities = {};
    $scope.searchParam = {};
    $("input").removeAttr('disabled');
    $scope.searchParam.Distance = $scope.miles[0];

1 个答案:

答案 0 :(得分:1)

我能够解决该问题。

这是我解决该问题的方法,这是我在Stackoverflow上找到的一个很好的解释,解释了 $ watch()的工作原理。

$scope.$watch('searchParam.City', function(newValue, oldValue) {
    if(newValue != ''){
        //$scope.lastAction = 'miles';
        $scope.searchParam.Distance = '';
        $scope.searchParam.Zip = '';
    }
});