在Angularjs中添加對象到數組

我想了解AngularJS中自定義過濾器的概念。爲此，我製作了一張我想過濾的簡單表格。我知道我可以使用內置的Angular過濾器做簡單的過濾，但是我爲了練習目的做了這個。我知道過濾器尚未完成。它不會返回任何東西。首先，我想解決以下問題：在Angularjs中添加對象到數組

我遇到了將對象添加到數組的問題。 array.push（對象）應該很簡單。但是在'for循環'中，前一個對象正在被新的對象替換。我不知道爲什麼會這樣。爲了調查這個問題，我添加了一些console.log來查看（並希望瞭解）發生了什麼。但我無法弄清楚。

還有另一種行爲，我無法解釋：循環運行兩次：它再次通過相同的數組（vm.players）。有沒有人對此行爲有過解釋？

這是我angularJS腳本：

var app = angular.module('main', ['angular.filter']) 

    .filter('filterIns', function() { 
     return function(input, ins) { 

     var out = []; 
     var obj = {}; 

     for (var i = 0; i < input.length; i++) { 

      if (input[i].instrument == ins) { 
      obj.name = input[i].name; 
      obj.instrument = input[i].instrument; 

      console.log(obj); 
      out.push(obj); 
      console.log('inside IF ' + i); 
      console.log(out); 
      } 

     } 

     } 
    }) 

    .controller('DemoCtrl', function() { 

     var vm = this; 

     vm.players = [ 

     { 
      "name": "Mariko", 
      "instrument": "horn" 
     }, { 
      "name": "Kareem", 
      "instrument": "cello" 
     }, { 
      "name": "Lance", 
      "instrument": "horn" 
     }, { 
      "name": "Gail", 
      "instrument": "flute" 
     }, { 
      "name": "Armand", 
      "instrument": "cello" 
     }, { 
      "name": "Anika", 
      "instrument": "flute" 
     }, { 
      "name": "Mallory", 
      "instrument": "clarinet" 
     }, { 
      "name": "Odysseus", 
      "instrument": "clarinet" 
     }, { 
      "name": "Colt", 
      "instrument": "cello" 
     }, { 
      "name": "Kessie", 
      "instrument": "violin" 
     }, { 
      "name": "Iola", 
      "instrument": "horn" 
     } 
     ]; 

    });

和HTML：

<!DOCTYPE html> 
    <html> 

    <head> 
     <script data-require="[email protected]" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
     <script data-require="[email protected]" data-semver="0.5.7" src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.7/angular-filter.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 
    </head> 

    <body ng-app="main"> 
     <div ng-controller="DemoCtrl as demo"> 

     <div> 
      <table border="0"> 
      <tr> 
       <th>name</th> 
       <th>instrument</th> 
      </tr> 
      <tr ng-repeat="nr in demo.players | filterIns:'flute' "> 
       <td>{{nr.name }}</td> 
       <td>{{nr.instrument}}</td> 
      </tr> 
      </table> 

     </div> 
     </div> 

    </body> 

    </html>

請看看this plunk

來源

2017-10-10 Jojoseph

看一看http://plnkr.co/edit/ZGOnEblMJudBRWkKi8u1?p=preview –

@UshmaJoshi：該訣竅：創建函數返回前一個空的對象。另外一個好處是將對象作爲一個整體添加，而不是按照我在第一個plunk中所做的那樣對每個鍵/值對進行添加。但我仍然有這個問題：爲什麼返回函數第二次運行？我不明白這種行爲。 – Jojoseph

對象是在JavaScript中，引用在其他編程語言。修改對象中的任何內容都會影響指向同一對象的所有引用。

所以：

var obj = {a:1}; 
var obj1 = obj; 

obj.a = 2; 
console.log(obj1.a); // 2

要解決你的問題，你需要在每個循環創建一個新的對象

for (var i = 0; i < input.length; i++) { 
    var obj = {a:xx, b:yy}; 
    // don't use obj.a = xx; obj.b = yy; 
    out.push(obj); 
}

來源

2017-10-10 11:36:43 Icycool

感謝您解釋這一點！ – Jojoseph

陣列覆蓋前值：這是因爲你正在創建在for循環之外的對象'obj'。請在過濾器的for循環中創建對象。

所以濾波代碼爲象下面這樣：

.filter('filterIns', function(){ 
    return function(input, ins) { 
    console.log(ins); 
    var out = []; 
     for (var i = 0; i < input.length; i++) 
      if (input[i].instrument == ins) { 
      var obj ={}; 
      obj.name = input[i].name; 
      obj.instrument = input[i].instrument; 
      out.push(obj); 
      } 
     } 
     console.log(out); 
    } 

    })

來源

2017-10-10 11:55:11

這是正常的，angularjs採用了「髒檢查」的方法，所以它需要調用所有的過濾器，看看是否存在任何改變。之後，它會檢測到您在一個變量（您鍵入的變量）上有變化，然後再次執行所有過濾器以檢測是否有其他變化。這是編輯的 plunker爲您的對象替換問題。

.filter('filterIns', function(){ 
    return function(input, ins) { 
    var obj ={}; 
    var out = []; 
    for (var i = 0; i < input.length; i++) { 
    if (input[i].instrument == ins) { 
     obj = input[i]; 
     out.push(obj); 
    } 
    console.log(out); 
    } 
}

Here is another plunker same calling filter twice

來源

2017-10-11 09:41:19

在Angularjs中添加對象到數組

回答

相關問題