Question

我写了一个简单的过滤器，但由于我使用的变量，它似乎不起作用。这是代码：

<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>

所以如果我们仔细观察

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

它不喜欢它。如果我改变

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

代表

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

它有效（只要我在portfolio.list中添加了2个对象）

我试过

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

哪个不起作用但是这个有效

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

以及其他一些没有成功的事情。我做错了什么？

Answer 1

获胜者是......

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

问题是搜索返回一个字符串，它必须以整数转换。但是在javascript中发现类型问题并不容易......

感谢大家的帮助。

Answer 2

我试图理解你的代码，但没有得到。然后我用最终类似的目标装载这个例子。可以评估是否适合您？过滤器使用对象的属性和值

＆＃13;

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;  
        }    
    });

＆＃13;

<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>

＆＃13;

AngularJS $过滤器无效

2 个答案: