Filtr Tablica obiektów przez atrybut o wartości całkowitej w ng-repeat

Question

mam dyrektywę jak ten

ng-repeat="place in tb_places | filter:{'id':inputID}" 

do produkcji niektórych Tablica obiektów wygląda tak

$scope.tb_places = [ 
{name: 'some1', id:1} 
... 
{name: 'some10', id:10} 
{name: 'some11', id:11} 
{name: 'some12', id:12} 
... 
] 

przy zmianie inputID i ustaw ją na 1, tablica wyników wypełnia elementy tablicy źródłowej z "identyfikatorami" 1 i 10,11,12. W ten sposób część wartości "id" jest sprawdzana jako podłańcuchy, a nie liczby. Jak mogę go leczyć?

dziękuję!

UPD Próbowałem dodać ": true" w wyrażeniu filtru - całkowicie wyczyści dane wyjściowe (tablica wyników), działa dla prostej tablicy ciągów, ale nie dla obiektów ("prawda" chce ścisłego dopasowania z wzór obiektu, to znaczy ze wszystkimi jego właściwościami)

SOLVED !!!

Przykro mi, chłopaki, moja wina! "inputID" nie był tego samego typu, co "id" (string vs int), więc wbudowany komparator (": true") zwraca false. Wielkie dzięki!

ps Przepraszam, nie mogę głosować na twoje pytania - brak reputacji ... do zobaczenia!

Answer 1

Musisz dodać comparator według kąta filter, aby osiągnąć swoje wymagania.

można zmienić kod jako:

ng-repeat="place in tb_places | filter: {'id' : inputID} : true" 

Answer 2

Musisz albo dostarczyć swój własny komparator lub ręcznie konwertować poszukiwana na wartości do liczby całkowitej i używać true flag

Kontroler:

app.controller('DemoCtrl', function() { 
    this.query = '1'; 

    this.queryAsInt = function() { 
    return parseInt(this.query, 10); 
    }; 

    this.stuff = [ 
    {id: 1, label: 'Foobar 1'}, 
    {id: 2, label: 'Foobar 2'}, 
    {id: 3, label: 'Foobar 3'}, 
    {id: 4, label: 'Foobar 4'}, 
    {id: 5, label: 'Foobar 5'}, 
    {id: 6, label: 'Foobar 6'}, 
    {id: 7, label: 'Foobar 7'}, 
    {id: 8, label: 'Foobar 8'}, 
    {id: 9, label: 'Foobar 9'}, 
    {id: 10, label: 'Foobar 10'}, 
    {id: 11, label: 'Foobar 11'}, 
    {id: 11, label: 'Foobar 12'} 
    ]; 

    this.compare = function(a, b) { 
    return parseInt(a, 10) === parseInt(b, 10); 
    }; 
}); 

Widok:

<div ng-controller="DemoCtrl as demo"> 
    <input ng-model="demo.query"> 
    <p>With custom comparator:</p> 
    <ul> 
    <li ng-repeat="item in demo.stuff | filter:{id:demo.query}:demo.compare"> 
     {{item.label}} 
    </li> 
    </ul> 

    <p>With type casting:</p> 
    <ul> 
    <li ng-repeat="item in demo.stuff | filter:{id:demo.queryAsInt()}:true"> 
     {{item.label}} 
    </li> 
    </ul> 
</div>); 

A oto działa przykład: http://jsbin.com/kecihexeyu/1/edit?html,js,output

Answer 3

Napisz porównawczy.

HTML

<li ng-repeat="place in tb_places | filter:{'id':inputID}: filterId">{{place.id}}</li> 

JavaScript

filterId = function(actual, expected) { 
    return actual == expected; 
} 

Plunker pełnej wersji. http://plnkr.co/edit/3JEvThiemq8ro8cXCYBd?p=preview