将ng-model传递到自定义过滤器中

Question

I need to make a text box that searches through a javascript array (with objects in it) using angular. It needs to be strict and only return a result once it is exactly matched (So unlike the default filter, if there is no text nothing should be returned). I found a custom filter on here (thanks guys), that did what I wanted with one exception: I cant pass my input ng-model to it. Using the default angular filter I am able to pass ng-model into it like this:

<input type="text" ng-model="searchID">

<div ng-repeat="additive in additives | filter:searchID">

But when I try do this with my exactMatch filter

app.filter('exactMatch', function() {
    return function(additives, pattern) {
        var result = [];
        console.log(pattern);
        additives.forEach(function (additive) {
            if(pattern != "") {
                console.log(pattern);
                if (additive.Number == pattern) {
                    result.push(additive);
                }
            }
        });
        return result;
    }
});

It refuses to cooperate, and that console.log(pattern) returns undefined.

I also realise that ng-repeat might not be the best way to do this since I am only ever returning max 1 object.

Answer 1

You can try removing the filter completely and just showing/hiding elements if they are equal.

Markup:

<div ng-app="app" ng-controller="mainCtrl">
   <input type="text" ng-model="search.searchId">
   <div ng-repeat="additive in data.additives">
       <span ng-show="actions.showIfEqual(additive);">{{additive}}</span>
   </div>
</div>

Controller logic:

app.controller('mainCtrl', function($scope) {
    $scope.data = {
        additives: ['a','b', 'c', 'd']
    }
    $scope.search = {
        searchId: ''
    };

    $scope.actions = {
        showIfEqual: function (additive) {
            console.log(additive === $scope.search.searchId);
            return additive === $scope.search.searchId;
        }
    };
});