Form drop-down not showing mileage options

Question

I have a form which the user enters their zip code and the distance radius (which is a drop-down) or they have the option look based on city. In my controller, for the miles, I have the following values:

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

and here is my drop-down:

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

The issue I am encountering is if the user decides to look up based on City, by default, the value is 5 based on my scope. My question is how can the default value not apply when the user looks up based on City.

The following is what I am doing to look for the results.

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

and the following is my controller:

I thought by adding "{'value': ''}" to my scope would resolve the issue. However, I am getting the following error "No response: searchParam[param].trim is not a function"

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

It would be great if you could add an answer showing how you solved it.. — boateng, Nov 08 '18 at 00:44
@numbtongue: I added what I did to resolve the issue. I hope it makes sense — user9808783, Nov 08 '18 at 16:48
@user9808783 Yes, but if you add it as an answer people know your question has an answer. You can even accept it yourself. ;) So just copy it from your post and paste it in an answer (and accept it). — JeroenE, Nov 08 '18 at 16:51

score 1 · Accepted Answer · answered Nov 08 '18 at 17:31

I was able to resolve the issue.

Here is what I did to resolve the issue and here is a really good explanation I found on Stackoverflow that explains how $watch() works.

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

Form drop-down not showing mileage options

1 Answers1