在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中添加对象到数组

回答

相关问题