AngularJS $filter not working

Question

I wrote a simple filter but it don't seem to work because of the variable I use. Here is the code:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script type="text/JavaScript">
        var app = angular.module('myApp',[]);

        app.factory('Property', function () {

            /**
            * Constructor, with class name
            */
            function Property(newProperty) {
                this.id = newProperty.id;
                this.purchasePrice = newProperty.pprice;
                this.marketValue = newProperty.mv;
                this.stampDuty = newProperty.stamp;
                this.sourcingFee = newProperty.sourcing;
                this.legaFee = newProperty.legal;
                this.otherFee = newProperty.other;
                this.mortgage = null;
            }

            return {
                createNew: function(newProperty) {
                    return new Property(newProperty);
                },
                setMortgage: function(newMortgage) {
                    console.log(newMortgage);
                    this.mortgage = Mortgage.createNew(newMortgage);
                }
            };
        });

        app.factory('portfolio', function(Property, $filter){
            var portfolio = {};
            portfolio.list = [];

            portfolio.add = function(newProperty){
                var prop = Property.createNew(newProperty);
                portfolio.list.push(prop);
            };

            portfolio.getProperty = function(propertyId) {
                var property = $filter('filter')(portfolio.list, propertyId, true);
                alert("property found: " + $filter('json')(property) + $filter('json')(filterArg));
                return property;
            };

            return portfolio;
        });

        app.controller('ListCtrl', function(portfolio) {
            var self = this;
            self.portfolio = portfolio.list;
        });

        app.controller('PostCtrl', function(portfolio){
            var self = this;

            self.addProperty = function(newProperty){
                newProperty.id = portfolio.list.length;
                portfolio.add(newProperty);
            };
            self.getProperty = function(search){
                property = portfolio.getProperty(search);
            }

        });
    </script>
</head>

<body ng-app="myApp">
    <div style="text-align: center">
        <h2>Initial investment</h2>

        <ul class="list">
                <input type="hidden" ng-model="newProperty.id" placeholder="id">
                <input type="text" ng-model="search" placeholder="search">
            <li class="list__item">
                <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required>
            </li>
            <li class="list__item">
                <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
            </li>
            <li class="list__item">
                <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
            </li>
            <li class="list__item">
                <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
            </li>
            <li class="list__item">
                <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
            </li>
            <li class="list__item">
                <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
            </li>
        </ul>
    </div>
    <br />
    <div ng-controller="ListCtrl as list">
        <p ng-repeat="prop in list.portfolio track by $index">
            New Object: {{prop.id}} - {{prop.purchasePrice}}: {{prop.legaFee}} </p>
    </div>
    <div ng-controller="PostCtrl as post">
        <button class="button" ng-click="post.addProperty(newProperty)">Add Property</button><br/>
        <button class="button" ng-click="menu.setMainPage('finance.html')">Next <ons-icon icon="ion-arrow-right-b"></ons-icon></button><br/>
        <button class="button" ng-click="post.getProperty(search)">Search Property</button>
        <p>{{newProperty}}</p>
    </div>
</body>
</html>

So if we look closely at

 portfolio.getProperty = function(propertyId) {
            var property = $filter('filter')(portfolio.list, propertyId, true);
            alert("property found: " + $filter('json')(property) + $filter('json')(filterArg));
            return property;
        };

It doesn't like it. If I change

 var property = $filter('filter')(portfolio.list, {id: propertyId}, true);

for

 var property = $filter('filter')(portfolio.list, {id: 2}, true);

it works (as long as I added 2 objects in portfolio.list)

I tried

 var object = {};
 object.id = propertyId;
 var property = $filter('filter')(portfolio.list, object.id, true);

which doesn't work but this works

 var object = {};
 object.id = 1;
 var property = $filter('filter')(portfolio.list, object.id, true);

and a few other things without success. What am I doing wrong ?

You are accessing newProperty which is out side of your controller. — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Nov 10, 2015 at 8:57
I'm not sure where you see that I am accessing newProperty in my filter. I'm searching inside portfolio, so I'm afraid I really don't understand the relation with what you are saying. — nocrack
– nocrack, Commented Nov 10, 2015 at 9:08
ng-model="newProperty.id" which is not inside of any controller. — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Nov 10, 2015 at 9:09
It's right, it isn't but the rest works. I.e if you try to run the code and do an alert(propertyId) in the function, I do get the number put in the searchbox — nocrack
– nocrack, Commented Nov 10, 2015 at 9:13
I tried your suggestion, it didn't work. I moved this div <div ng-controller="PostCtrl as post"> and it's content to the first div so the 3 buttons and the inputs are under this controler, and the ListCtrl is outside with no luck. The behaviour is still the same. working with a number, not with a variable or object. — nocrack
– nocrack, Commented Nov 10, 2015 at 11:08

nocrack · Accepted Answer · 2015-11-11 01:23:32Z

1

And the winner is ...

portfolio.getProperty = function(propertyId) {
        var property = $filter('filter')(portfolio.list, {id: +propertyId}, true);
        return property;
 };

The problem is that the search return a string, it had to be converted in an integer. but it's not easy to spot type issue in javascript...

Thank you for your help everyone.

answered Nov 11, 2015 at 1:23

nocrack

811 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emir Marques · Accepted Answer · 2015-11-10 12:57:43Z

I tried to understand your code, but no get. Then i mount this example with the objective final similar. Can evaluate if works for you? The filter works with propertie and value of object

var myapp = angular.module('myapp', []);
myapp.controller('AppController', function ($scope) {
    $scope.objectList = [
        {
            "age":"32",
            "name":"Daniel Grey"
        },{
            "adress" : "Rua Xyz",
            "Phone" : "000-0000"
        }];
        
        $scope.add = function(){
            $scope.objectList.push($scope.newProperty);
        }
    });
    
    myapp.filter('objectFilter', function(){
        return function(objects, criteria){
            var filterResult = new Array();
            if(!criteria)
            return objects;
            
            angular.forEach(objects, function(item, key) {
                angular.forEach(item, function(value, propertie) {
                    if((String(propertie).indexOf(criteria) > -1 || String(value).indexOf(criteria) > -1) && filterResult.indexOf(item) == -1)
                        filterResult.push(item);
                });
            });
            return filterResult;  
        }    
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="AppController">
    <div>Filter by name only: <input type="text" ng-model="search" /></div>
    
    <ul>
        <li ng-repeat="item in (objectList | objectFilter:search) track by $index">{{item}}</li>
    </ul>
   
    <hr>
    <ul class="list">
        <input type="hidden" ng-model="newProperty.id" placeholder="id">
        <li class="list__item">
            <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required>
        </li>
        <li class="list__item">
            <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
        </li>
        <li class="list__item">
            <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
        </li>
        <li class="list__item">
            <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
        </li>
        <li class="list__item">
            <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
        </li>
        <li class="list__item">
            <input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
        </li>
    </ul>
    <input type="button" value="Add" ng-click="add();"/>
</div>

Thank you Emir, This does work but I accually found the problem on my code

Collectives™ on Stack Overflow

AngularJS $filter not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related