CODEWITHSUNDEEP
angularjsfilter
nocrack
nocrack

Reputation: 81

AngularJS $filter not working

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 ?

Upvotes: 1

Views: 2419

Answers (2)

nocrack
nocrack

Reputation: 81

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.

Upvotes: 1

Emir Marques
Emir Marques

Reputation: 2687

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>

Upvotes: 0

Related Questions