Question

我有一个JSON文件，其中包含一些书籍的详细信息：

JSON文件（我已将其粘贴以显示参数）：

{
    "books": [{
        "bookId":101,"bookTitle":"Angular JS","topic":"Angular JS",
        "author":"Green",
        "cost":375,
        "imgUrl":"images/AngularJS1.JPG",
        "issued":true
    }, {
        "bookId":102,
        "bookTitle":"Instant Angular JS Starter",
        "topic":"Angular JS",
        "author":"Dan Menard",
        "cost":150,
        "imgUrl":"images/AngularJS2.JPG",
        "issued":true
    }, {
        "bookId":103,
        "bookTitle":"Ng-Book:The Complete Book on Angular JS",
        "topic":"Angular JS",
        "author":"Ari Lerner",
        "cost":4657,
        "imgUrl":"images/AngularJS3.JPG",
        "issued":false
    }, {
        "bookId":104,
        "bookTitle":"Developing BackbonJS Applications",
        "topic":"Backbone JS",
        "author":"Addy Osmani",
        "cost":650,
        "imgUrl":"images/BackboneJS1.JPG",
        "issued":true
    }, {
        "bookId":105,
        "bookTitle":"Backbone.js Patterns and Best Practices",
        "topic":"Backbone JS",
        "author":"Swarnendu De",
        "cost":390,
        "imgUrl":"images/BackboneJS2.JPG",
        "issued":false
    }, {
        "bookId":106,
        "bookTitle":"Backbone.js Cookbook",
        "topic":"Backbone JS",
        "author":"Vadim Mirgorod",
        "cost":240,
        "imgUrl":"images/BackboneJS3.JPG",
        "issued":false
    }, {
        "bookId":107,
        "bookTitle":"Ember.js in Action",
        "topic":"Ember JS",
        "author":"Joachim Haagen Skeie",
        "cost":2500,
        "imgUrl":"images/EmberJS1.JPG",
        "issued":false
    }, {
        "bookId":108,
        "bookTitle":"Mastering Ember.js",
        "topic":"EmberJS",
        "author":"Mitchel Kelonye",
        "cost":3500,
        "imgUrl":"images/EmberJS2.JPG",
        "issued":false
    }, {
        "bookId":109,
        "bookTitle":"Developing an Ember JS Edge",
        "topic":"EmberJS",
        "author":"Jamie White and Matthew Beale",
        "cost":2000,
        "imgUrl":"images/EmberJS3.JPG",
        "issued":false
    }, {
        "bookId":110,
        "bookTitle":"Node.js in Action",
        "topic":"NodeJS",
        "author":"Mike Cantelon and Marc Harter",
        "cost":800,
        "imgUrl":"images/NodeJS1.JPG",
        "issued":false
    }, {
        "bookId":111,
        "bookTitle":"Node.js the Right Way",
        "topic":"NodeJS",
        "author":"Jim R. Wilson",
        "cost":1200,
        "imgUrl":"images/NodeJS2.JPG",
        "issued":false
    }, {
        "bookId":112,
        "bookTitle":"Pro Node.js for Developers",
        "topic":"NodeJS",
        "author":"Colin Ihrig",
        "cost":2800,
        "imgUrl":"images/NodeJS3.JPG",
        "issued":false
    }]
}

我在控制器中使用Angular JS的$ http服务访问此JSON文件。

我终于在HTML中显示详细信息，我想使用自己的自定义过滤器添加货币符号，下面是代码。

HTML代码：

<table>
<tr class="LoginFormDiv" ng-repeat="iterator in variable|orderBy:sort |filter:mySearch|addRupeeSymbol">
    <td>{{$index+1}}</td>
    <td>
        <img src="{{iterator.imgUrl}}"/>
    </td>
    <td>
        <table>
            <tr>
                <td>Book Id:</td><td>{{iterator.bookId}}</td>
            </tr>
            <tr>
                <td>Book Title:</td><td>{{iterator.bookTitle}}</td>
            </tr>   
            <tr>
                <td>Book Topic:</td><td>{{iterator.topic}}</td>
            </tr>
            <tr>
                <td>Book Author:</td><td>{{iterator.author}}</td>
            </tr>
            <tr>
                <td>Book Cost:</td><td>{{iterator.cost}}</td>
            </tr>
            <tr>
                <td>Issued</td><td>{{iterator.issued}}</td>
            </tr>
            <tr>
                <td>
                    <button ng-disabled="iterator.issued == true" ng-click="issueBook(iterator.bookId)"> Issue </button>
                    <button ng-disabled="iterator.issued == false" ng-click="returnBook(iterator.bookId)"> Return </button>
                </td>    
            </tr>
        </table>
    </td>
</tr>
</table>

＆＃34; addRupeeSymbol＆＃34;是我的自定义过滤器。

自定义过滤器：

var myFilter = angular.module('myFilter', []);

myFilter.filter('addRupeeSymbol', function() {
    return function(input) {        
        var costWithRupeeSymbol = [];

        angular.forEach(input, function(value, index) {
            value.cost = "Rs." + value.cost;
            costWithRupeeSymbol.push(value);
        });     

        return costWithRupeeSymbol;
    }
});

当代码执行时，我得到输出为RsRsRsRsRsRsRsRsRsRsRs375，为什么会发生这种情况我无法理解这个for循环在这里的表现如何。请解释一下。

Answer 1

不知何故，input长度为7.除非你想拥有Rs，否则你不应该在过滤器中使用角度foreach循环。在每个角色之前。这是一个例子：

var myFilter = angular.module('myFilter', []);
myFilter.filter('addRupeeSymbol', function () {
    return function (cost) {
        return 'Rs.'+cost;
    }
}

Answer 2

有两种类型的过滤器：数组过滤器和值过滤器。例如，使用ng-repeat时，可以使用数组过滤器（ng-repeat =“someArray | myFilter中的项目”）。在这种情况下，myFilter将整个数组作为参数获取，并且myFilter函数按预期工作。

另一方面，值过滤器仅作为参数获取该值。因此，您可以更改值（将格式设置为它），但您无权访问所有数组值。

关键是，您应该为格式化创建值过滤器：

var myFilter = angular.module('myFilter',[]);
myFilter.filter('addRupeeSymbol', function(){

return function(input) {    
    return 'Rs.' + input;
}

<强> UPD

循环运行超过12次的原因是什么？

每当某个值发生变化时，摘要循环就会运行。您在过滤器过程中更改了数组

value.cost = "Rs." + value.cost;

它会触发摘要事件。如果你添加行

console.log('filter run');

在过滤程序之上，您会看到此代码在失败之前运行了11次。

filter('addRupeeSymbol', function() {
    return function(input) {        

        console.log('filter run');

        var costWithRupeeSymbol = [];

        angular.forEach(input, function(value, index) {
            value.cost = "Rs." + value.cost;
            costWithRupeeSymbol.push(value);
        });     

        return costWithRupeeSymbol;
    }
})

那是无限循环。如果您对value.cost正在更改的行进行注释，则消息“filter run”仅发生2次（一次用于初始化，一次用于实际运行）

filter('addRupeeSymbol', function() {
    return function(input) {        

        console.log('filter run');

        var costWithRupeeSymbol = [];

        angular.forEach(input, function(value, index) {
            // value.cost = "Rs." + value.cost;
            costWithRupeeSymbol.push(value);
        });     

        return costWithRupeeSymbol;
    }
})

我真的不能想到一个好的例子，你只需要对过滤器中的数组进行更改。更多关于docs的摘要。

每个循环行为的角度

2 个答案: