Angular: re-enable null values ​​when filter parameter is empty

Question

I have a fairly simple textboxfiltering ng-repeaton some unordered lis. When I add a value to textbox, elements with values nullare deleted and not returned even when cleared textbox. I have an idea why this happens (the search object now has an empty property that does not match nulls), but I cannot figure out how to solve the problem. I tried the pop()property of the search object with no luck.

HTML:

<div ng-controller="ListCtrl">
    <input type="text" ng-model="search.age" placeholder="Age"></input>
    <ul>
        <li ng-repeat="item in items | filter:search">
            {{item.name}} - {{item.age}}
        </li>
    </ul>
</div>

JS:

function ListCtrl($scope) {
  $scope.items = [
    {'name':'Carl', 'age':69},
    {'name':'Neil', 'age':54},
    {'name':'Richard'},
    {'name':'Chris', 'age':58}
  ];
}

Please check out JSfiddle to better illustrate the problem.

Answer 1

. ng-change , delete .

HTML:

<input type="text" ng-model="search.age" ng-change="clear()" placeholder="Age"></input>

JS:

$scope.clear = function(){
    if($scope.search.age.length == 0){
        delete $scope.search.age;
    }
}

fiddle. , if , , , .

: ! null, !! null.

Answer 2

, , :

app.directive('deleteIfEmpty', function () {
    return {
        restrict: 'A',
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch("ngModel", function (newValue, oldValue) {
                if (typeof scope.ngModel !== 'undefined' && scope.ngModel.length === 0) {
                    delete scope.ngModel;
                }
            });
        }
    };
});

:

 <input type="text" ng-model="filter" delete-if-empty>

Answer 3

ng-:

<input type="text" ng-model="searchObj.age" placeholder="Age"></input>

:

$scope.searchObj = {
}

html:

ng-repeat="item in items | filter: searchObj.age"

ng-repeat="item in items | filter: {age: searchObj.age || undefined}"

jsfiddle

Answer 4

: . Angular, undefined ( ), switch false. ng-repeat, $scope.search.age - undefined. $scope.search.age ... .

  switch (typeof obj) { ***<-- obj is undefined when you have a missing age***
    case "boolean":
    case "number":
    case "string":
      return comparator(obj, text);
    case "object":
      switch (typeof text) {
        case "object":
          return comparator(obj, text);
        default:
          for ( var objKey in obj) {
            if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
              return true;
            }
          }
          break;
      }
      return false;
    case "array":
      for ( var i = 0; i < obj.length; i++) {
        if (search(obj[i], text)) {
          return true;
        }
      }
      return false;
    default:
      return false;  ***<--falls through and just returns false***
  }

, - .

http://jsfiddle.net/wuqu2/

<div ng-controller="ListCtrl">
    <input type="text" ng-model="search.age" placeholder="Age"></input>
    <ul>
        <li ng-repeat="item in items | filter:checkAge">
            {{item.name}} - {{item.age}}
        </li>
    </ul>
</div>

  $scope.checkAge = function(item)
  {
      if($scope.search && $scope.search.age && $scope.search.age.length > 0)
      {
          return item.age && item.age.toString().indexOf($scope.search.age) > -1;
      }
      return true;
  }