Question

我试图了解AngularJS中自定义过滤器的概念。因此，我制作了一个我想要过滤的简单表格。我知道我可以使用内置的角度滤镜进行简单的过滤，但我将其用于练习目的。我知道过滤器尚未完成。它没有任何回报。首先，我想解决以下问题：

我在向数组添加对象时遇到问题。使用array.push（object）应该很简单。但是在'for循环'＆＃39;上一个对象正在被新的对象取代。我不知道为什么会这样。为了解决这个问题，我添加了一些console.log来查看（并希望了解）正在发生的事情。但我无法理解。

这也是我无法解释的另一个行为：循环运行两次：它第二次通过相同的数组（vm.players）。有没有人对此行为有解释？

这是我的angularJS脚本：

y_pred

和html：

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

    });

请查看this plunk

Answer 1

对象是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);
}

Answer 2

数组覆盖以前的值：这是因为你在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);
    }

  })

Answer 3

这是正常的，angularjs使用＆＃39; 脏检查＆＃39;方法，因此需要调用所有过滤器以查看是否存在任何更改。在此之后，它检测到您对一个变量（您键入的变量）进行了更改，然后再次重新执行所有过滤器以检测是否有其他变化。这是针对您的对象替换问题的已编辑 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

在Angularjs中向对象添加对象

3 个答案: