Angular ng-model returns undefined

Question

I am working on an old project and there is a problem with the filters. So this is the html part.

<input type="text" class="form-control" ng-model="FilterEventsEdit"
       ng-change="FilterEvents()"
       style="width: 300px; margin-bottom: 5px; display: inline;">

And here is the JS

$scope.FilterEvents = function () {
    $scope.EventsGridDataSource.filter({
        logic: "or",
        filters: [
            { field: "Name", operator: "contains",
              value: $scope.FilterEventsEdit },
            { field: "Expression", operator: "contains",
              value: $scope.FilterEventsEdit }
        ]
    });
};

I always get the $scope.FilterEventsEdit as undefined. I have the same logic, but with different models, and they are working. Can't find what is the problem here.

try defining your model as $scope.FilterEventsEdit = ""; in your controller — Risalat Zaman, Jan 27 '21 at 15:56
That didn't worked. But the solutions was to add an object $scope.Filters = {} in the controller and then pass the variables in this object. This happened because I had a div above the input with ng-if, and ng-if was creating a child scope. — Nadia, Jan 27 '21 at 16:17

score 0 · Answer 1 · answered Jan 27 '21 at 19:37

You need to initialize $scope.FilterEventsEdit variable before use.

$scope.FilterEventsEdit="";

$scope.FilterEvents = function () {
    $scope.EventsGridDataSource.filter({
        logic: "or",
        filters: [
            { field: "Name", operator: "contains", value: $scope.FilterEventsEdit },
            { field: "Expression", operator: "contains", value: $scope.FilterEventsEdit }
        ]
    });
};

score 0 · Answer 2 · answered Jan 28 '21 at 06:27

In your controller you do get the right value of the text box via ng-model. If you enter any input in the text box, the event is getting triggered. However, when the page loads, you should check what is the initial value of $scope.FilterEventsEdit. If it is not set, it defaults to undefined. But your method is only called when the input text changes. I tried in a sample JS fiddle and it seems to work fine. Code snippet below:

<input type="text" class="form-control" ng-model="FilterEventsEdit" ng-change="FilterEvents()" style="width: 300px; margin-bottom: 5px; display: inline;">

// assigning empty string by default. You may have some default value as per your use case
$scope.FilterEventsEdit = '';
// Here you will see empty string getting logged in console. If above default value is not assigned, you will get undefined here.
console.log('filterEventsEdit: ', $scope.FilterEventsEdit);

$scope.FilterEvents = function () {
    console.log($scope.FilterEventsEdit);
    /* commenting this to test in my JS fiddle
     $scope.EventsGridDataSource.filter({
        logic: "or",
        filters: [
          { field: "Name", operator: "contains", value: $scope.FilterEventsEdit },
          { field: "Expression", operator: "contains", value: $scope.FilterEventsEdit}
        ]
    });*/
};

Inside the method as well, you will get the current value of the text box. See working JS fiddle here that you can play around with: https://jsfiddle.net/sagarag05/4jb1cpog/6/

Angular ng-model returns undefined

2 Answers2