I've been utilizing the built-in angular filter "$filter" in my controller to filter a dropdown list of data, but I'm facing an issue where the filtered data doesn't match the text being typed. After some research, I discovered that there might be problems with filters not working correctly on objects and arrays in version 1.3. I'm now contemplating upgrading to version 1.5 to see if that resolves my problem or if it's due to syntax errors in my code. Here is a snippet of what I currently have:
DATA (initial data for ng-repeat and filtering):
this.items = [
{ name: 'Jim', city: 'Minneapolis', state: 'MN', zip: 44332 },
{ name: 'Boe', city: 'Scottsdale', state: 'AZ', zip: 44332 },
{ name: 'Tom', city: 'S.F.', state: 'CA', zip: 11223 },
{ name: 'Joe', city: 'Dallas', state: 'TX', zip: 34543 },
{ name: 'Jon', city: 'L.A.', state: 'CA', zip: 56433 },
];
TEMPLATE:
<input type="text" class="form-control" name="inputField" ng-change="ctrl.filterTextChangeLocal($event)" ng-model="ctrl.ngModelValue" ng-click="ctrl.openDropdown($event)" />
The input above is used to filter the following list:
<ul class="dropdown-menu list-group" ng-if="!ctrl.ngDisabled">
<li class="list-group-item" ng-repeat="row in ctrl.filteredItems"
ng-mousedown="ctrl.onSelectedLocal(row, $event)">
{{row[ctrl.itemDisplayProperty]}}
</li>
<li class="list-group-item text-center" ng-show="ctrl.filteredItems.length <= 0">
{{ctrl.noResultsMessage}}
</li>
</ul>
CONTROLLER:
// filtering the dropdown data
//$event is used to check for specific keypresses, irrelevant here
//ngModelValue is bound to ng-model inside the input
public filterTextChangeLocal($event: ng.IAngularEvent) {
this.filteredItems = this.$filter("filter")(this.items, this.ngModelValue);
}
The outcome is a basic bootstrap ul dropdown list displaying a specified property from the objects in the list (in this case, the name property), but the data isn't being properly filtered:
<li>Jim</li>
<li>Boe</li>
<li>Tom</li>
<li>Joe</li>
<li>Jon</li>
Thank you!