Update ng-Repeat Array bei Verwendung von Filter in Controller

Question

Ich habe ein Array, das ich verwenden, um eine Tabelle mit ng-Wiederholung zu füllen. Ich verwende einen Filter im Controller, der das Array basierend auf den Werten einer bestimmten Variablen columnFilter filtert. Jetzt wird meine Tabellenansicht nicht aktualisiert, wenn ich diese Variable ändere. Das heißt, der Filter wird nicht erneut angewendet, sobald sich die Variable ändert.

JS

var myApp = angular.module('myApp',[]); 
 

 

 
function MyCtrl($scope, $filter) { 
 
    $scope.name = 'Superhero'; 
 
    $scope.col={name:""}; 
 
    $scope.TableData = [{ 
 
     name: "2017/03/01-14", 
 
     specification: "1wk", 
 
    }, 
 
    { 
 
     name: "2017/03/01-17", 
 
     specification: "Set-04", 
 
    }, 
 
    { 
 
     name: "2017/03/04-11", 
 
     specification: "1wk", 
 
    }, 
 
    { 
 
     name: "2017/04/01-14", 
 
     specification: "1wk", 
 
    }, 
 
    { 
 
     name: "2017/03/10-10", 
 
     specification: "Set-04", 
 
    }, 
 
    { 
 
     name: "2017/03/10-10", 
 
     specification: "Set-04", 
 
    } 
 
    $scope.TableDataFiltered = $filter('filter')($scope.TableData, $scope.col); 
 
}

HTML

<div ng-controller="MyCtrl"> 
 
<input type="text" ng-model="col.name"> 
 
<table> 
 
<thead> 
 
    <tr> 
 
    <th>name</th> 
 
    <th>spec</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr ng-repeat="item in TableDataFiltered"> 
 
    <td>{{item.name}}</td> 
 
    <td>{{item.specification}}</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
</div>

---

Um alle Antworten zu sagen, wie | filter: expression Syntax verwenden, ich weiß darüber, aber die tatsächliche Anwendung hat andere Filter und solche, die die Notwendigkeit erfordern, in der Steuerung selbst zu filtern. (. I ein minimales Beispiel vorgesehen, die dieser Punkt nicht sehr klar machen, dass auf mich ist)

Answer 1

Keine Notwendigkeit $scope.TableDataFiltered in der Steuerung zu definieren, verwenden Sie nur Filter in der Vorlage:

<tr ng-repeat="item in TableDataFiltered | filter : col.name">

Answer 2

Sie brauchen nicht eine spezielle Funktion für diese zu schreiben, benutzen Sie einfach den Inline-Synthax:

<tbody> 
    <tr ng-repeat="item in TableDataFiltered | filter: col.name"> 
    <td>{{item.name}}</td> 
    <td>{{item.specification}}</td> 
    </tr> 
</tbody> 

Answer 3

Wenn Sie die Filter aus dem hTML-Winkel verwenden die Variablen beobachten, die es verwendet und neu bewerten den Ausdruck, wenn es Änderungen. Wenn Sie den Filter aus dem Code aufrufen möchten, müssen Sie das gleiche tun:

var myApp = angular.module('myApp',[]); 


function MyCtrl($scope, filterFilter) { 
    $scope.name = 'Superhero'; 
    $scope.col={name:""}; 
    $scope.TableData = [...]; 

    $scope.$watch('col', function(newCol) { 
     $scope.TableDataFiltered = filterFilter($scope.TableData, newCol); 
    }); 
} 

Beachten Sie auch, dass Sie direkt den Filter injizieren können Sie verwenden möchten, müssen Sie es nicht auf der Suche nach oben Filteranbieter jedes Mal. Aus der Dokumentation:

Dazu eine Abhängigkeit mit dem Namen < filter> Filter in Ihren Controller/Service/directive injizieren. Z.B. Ein Filter namens number wird mit der Abhängigkeit numberFilter injiziert. Das injizierte Argument ist eine Funktion, die den Wert als erstes Argument und Filterparameter beginnend mit dem zweiten Argument verwendet.

Beachten Sie, wenn Sie die Filter aus dem Controller verwenden werden dann Sie wahrscheinlich nicht brauchen die ungefilterten Daten im $scope zu belichten, in diesem Fall, dass Sie es nur eine gewöhnliche Variable machen könnten, oder bewegen die Tabellendaten aus dem Controller in einen Service. Auf diese Weise können Sie vermeiden, dass der Controller (der Dinge steuern sollte) mit Daten überladen wird.