angular-sanitize.js:6 TypeError: Cannot read property 'toLowerCase' of undefined

Question

 $scope.searchCat = function(){ $scope.searchArray = []; $scope.searchTerm = $('#search input[type="search"]').val().toLowerCase(); }

 <ion-header-bar class="bar bar-subheader item-input-inset"> <div class="item-input-wrapper"> <i class="icon ion-ios-search placeholder-icon"></i> <input type="search" name="search" ng-model="searchTerm" style="width: 75%;margin-left:10px;" ng-change="searchCat()" placeholder="search for service"/> </div> </ion-header-bar>

I am trying to use search in my list to get search item into lower case for next comparison i use toLowercase but i got type error as can not read property 'toLowercase' of undefined. Please help me out.

Thanks in advance

Answer 1

When you do this: ng-model="searchTerm" in your html, you are declaring the two way data-binding to $scope.searchTerm. This means you never need to search for the dom-element.

// In the old days using jQuery you do this: 
$('#search input[type="search"]') // But never (seldom) with angular. Ugly as sin.

Instead:

// The binding is already there.
// Just set the value to something so it won't be undefined.
$scope.searchTerm = ""; 

$scope.searchCat = function(){
    // Or you could do an undefined check:
    if ( !angular.isUndefined($scope.searchTerm) ){
        $scope.searchTerm = $searchTerm.toLowerCase();
    }
}

Of course this only converts it to lowercase. But we can't know what you want $scope.searchArray for. Explain further.