角for each循環行爲

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

我訪問這個JSON文件使用控制器中的Angular JS的$ http服務。

我最後在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> 

的 「addRupeeSymbol」 是我的自定義過濾器。

自定義過濾器：

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

有兩種類型的過濾器：陣列過濾器和過濾器值。例如，在使用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; 
    } 
}) 

那就是無限循環。如果你評論線的價值。成本發生變化，則顯示「過濾器運行」僅發生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。

Answer 2

不知怎的，input長度是7.你不應該在過濾器中使用角度foreach循環，除非你想有Rs。在每個角色之前。 下面是一個例子：

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