Winkel: Reinclude null-Werte, wenn die filter-parameter ist leer

Ich habe eine ziemlich einfache textbox Filterung eines ng-repeat auf einige ungeordnete lis. Wenn ich einen Wert um die textbox Elemente mit der null Werte werden gelöscht und nicht zurück, auch wenn die textbox deaktiviert ist. Ich habe eine Idee warum dies passiert ist (die suchen-Objekt hat jetzt eine leere Eigenschaft, die nicht mit der nulls), aber ich kann nicht herausfinden, wie das problem zu lösen. Ich habe versucht, zu pop() die Eigenschaft der Suche nach Objekt mit kein Glück.

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

Bitte der Kasse die JSfiddle zur besseren Veranschaulichung des Problems.

InformationsquelleAutor Jesse | 2014-03-06
  1. 4

    Habe ich es herausgefunden mit Hilfe dieser Antwort. Wenn ich fügen Sie einfach ein ng-change dem Textfeld kann ich sehen, die einen leeren Wert und delete Eigentum.

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

    Aktualisiert fiddle. Ich bin mir bewusst, das aktuelle if verhindert, dass ein Benutzer-Filter auf einen einzigen Raum, aber bisher scheint dies nicht zu einem problem für mich.

    BONUS: ! zurück null Werte und !! zurück nicht null Werte.

    InformationsquelleAutor Jesse
  2. 4

    Die sauberste Lösung, die ich gefunden habe, ist das schreiben einer benutzerdefinierten Richtlinie ändern, das Eingabefeld Verhalten wie diese:

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

    Und verwenden Sie es wie folgt:

     <input type="text" ng-model="filter" delete-if-empty>
    InformationsquelleAutor Ben Torfs
  3. 2

    Ändern Sie die input ng-model: 

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

    Fügen Sie diese zu Ihrem controller: 

    $scope.searchObj = {
}

    Und entweder von diesen arbeiten in Ihren html-repeat: 

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

    Oder

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

    jsfiddle

    InformationsquelleAutor tbmpls
  4. 0

    Werden Sie nicht in der Lage zu verwenden-filter:Suche. Blick auf die Winkel-code, wenn Ihr obj mit einem unbestimmten Alter gefiltert wird (auch wenn die Eingabe leer ist), wird es fallen, über diese switch-Anweisung und immer false zurückgeben. Dieser Schalter nicht genannt, bekommen das erste mal Ihre ng-repeat laufen, weil $scope.search.age ist nicht definiert. Nach Ihrer ersten Einreise in die input-und Lösch es raus, jetzt $scope.search.age ist ein leerer string...also den filter immer laufen.

      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***
  }

    Können Sie versuchen schreiben Sie Ihre eigenen filter-Funktion, so etwas wie dieses.

    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;
  }
    • Vielen Dank für deinen input! Ich werde versuchen, diese kurz heraus. Jedoch ist es möglich, irgendwie undefine $scope.search.age so, dass es läuft wie das erste laden?
    • Sie können 'löschen $Umfang.Suche.Alter, aber ich bin nicht sicher, wie Sie Sie machen würden, die zufällig zur richtigen Zeit?
    • Ich habe gerade herausgefunden über delete! Ich stellte eine Antwort der Implementierung dieser Lösung.
    InformationsquelleAutor Craig Squire
Schreibe einen Kommentar