В раскрывающемся списке формы не отображаются параметры пробега

Question

У меня есть форма, в которой пользователь вводит свой почтовый индекс и радиус расстояния (который является раскрывающимся списком), или у них есть выбор вида в зависимости от города. В моем контроллере для миль у меня есть следующие значения:

$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];

Answer 1

Мне удалось решить проблему.

Вот что я сделал для решения проблемы, и вот действительно хорошее объяснение, которое я нашел на Stackoverflow , которое объясняет, как $ watch () работает.

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