Angularjsの配列にオブジェクトを追加する

AngularJSのカスタムフィルタの概念を理解しようとしています。そのため、フィルタリングしたい簡単なテーブルを作った。組み込みの角度フィルタを使ってフィルタリングを簡単に行うことができますが、私はこれを運動目的で作成しました。私はまだフィルターが完成していないことを知っています。何も返さない。最初に以下を解決したいと思います：Angularjsの配列にオブジェクトを追加する

オブジェクトを配列に追加する際に問題があります。 array.push（object）を使うと簡単です。しかし、 'forループ'では、前のオブジェクトが新しいオブジェクトに置き換えられています。私はなぜそれが起こっているのか分かりません。この問題を調査するために、私はいくつかのconsole.logを追加して、何が起きているのかを理解しています。しかし、私はそれを理解することはできません。

私は説明できない別の動作もあります：ループは2回実行されています：同じアレイ（vm.players）を2回目に通過します。誰もこの行動の説明をしていますか？

これは私の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持っている：リターン機能の前に空のオブジェクトを作成：トリックをしました。また、私の最初の大群で行ったように、キー/値のペアごとではなく、オブジェクト全体を追加するのも良い点です。しかし、私はまだこの質問を持っています：なぜリターン関数は2回目の実行ですか？私はこの行動を理解していません。 – 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「ダーティチェック」アプローチを使用していますので、すべての変更が存在するかどうかを確認するためにすべてのフィルタを呼び出す必要があります。この後、1つの変数（入力した変数）に変更があったことが検出され、その後、すべてのフィルタが再度実行され、他の変更があるかどうかが検出されます。これはあなたのオブジェクト交換の問題のために編集された 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の配列にオブジェクトを追加する

答えて

関連する問題