Kann nicht mit Auswahl in Smart-Tabelle filtern

Question

Versuchen, eine Tabelle mit einer zu filtern, wählen Sie und ng-Optionen, aber nicht erfolgreich. Ich habe einen Plotter, der das Problem zeigt. Wer kann sehen, was vor sich geht?

http://plnkr.co/edit/WlojiFw26gqUoEDXOeQd?p=preview

Meine Auswahl:

<select class="form-control" 
    st-search="code" 
    st-input-event="change" 
    st-delay="0" 
    ng-model="selectedStatusFilter" 
    ng-options="f.code as f.text for f in codeOptions"> 
</select> 

Meine Optionen:

$scope.codeOptions = [{ 
    'text': 'On', 
    'code': 'On' 
    }, { 
    'text': 'Off', 
    'code': 'Off' 
    }, { 
    'text': 'Cat', 
    'code': 'Cat' 
    }, { 
    'text': 'All', 
    'code': '' 
    }] 

Typische Artikel in der Sammlung:

Ich hoffe also, dass der Wert von Select als Filter für die Codeeigenschaft der Elemente in der Sammlung interagiert wird. Also, wenn "On" ausgewählt ist, werden nur Artikel mit code : 'On' angezeigt, und mit All ausgewählt, da der Wert "" ist, sollten wir alle Elemente sehen.

• abgewinkelte Ausführung Mit 1.6.4
• Verwenden von Smart-Tabelle 2.1.8

Answer 1

Als alternative Art und Weise können Sie verwenden <option> und ng-repeat ohne ng-model

<select class="form-control" st-search="code"> 
       <option ng-repeat="f in codeOptions" 
       ng-selected="codeOptions.indexOf(f) == 3" 
       value="{{f.code}}">{{f.text}}</option> 
</select> 

Demo Plunker

Answer 2

In der Smart-Filter-Dokumentation gibt es eine Möglichkeit definiert, wie dies zu tun, finden Sie den Link Smart Table Filtering, So In diesem Link werden wir aufgefordert, das Attribut st-set-filter für das Deklarationselement der Smart-Tabelle zu verwenden. Eine andere Sache ist, in select using ng-options werden wir den Datentyp in der ng-model des Auswahlelement enthalten bekommen, entfernen Sie diese, können Sie track by f.code verwenden, so dass die HTML-Änderungen sind:

<section st-table="displayedCollection" st-safe-src="rowCollection" st-set-filter="myCustomFilter"> 
     <select class="form-control" 
     st-search="code" 
     st-input-event="change" 
     st-delay="0" 
     ng-model="selectedStatusFilter" 
     ng-options="f.code as f.text for f in codeOptions track by f.code"></select> 
     {{displayedCollection}} 
     <table class="table table-striped"> 
      <thead> 
      <tr> 

Die JS enthält eine Erklärung Filter entnommen aus die Dokumente.

app.filter('myCustomFilter', function($filter){ 
    return function(input, predicate){ 
     console.log(input, predicate); 
     return $filter('filter')(input, predicate, true); 
    } 
}); 

Schließlich unten ist eine Demo für das gleiche.

Plunkr Demo

Bitte lassen Sie mich wissen, wenn Sie irgendwelche Fragen stellen!