Question

我正在显示一个表列表，每行也是可扩展的。我想使用expandable table的属性过滤列表。例如，如果主表显示学生的一般信息，则可扩展表显示该学生的主题标记。我想按标记列过滤整个表格。因此，过滤应显示具有匹配标记的父表。

var students = [{ 
   name: "neha",
   address: "abc"
   marks: [{
      subject: "english",
      marks: 80
   }, {
      subject: "hindi",
      marks: 60
   }]
 }, { 
   name: "sneha",
   address: "xyz"
   marks: [{
      subject: "english",
      marks: 70
   }, {
      subject: "math",
      marks: 50
   }]
 }

为此我正在使用自定义过滤器来过滤列表。在自定义过滤器内部我使用“filterFilter”来过滤标记数组。

filterBy是跟踪要测试值的属性的属性。

例如，值可以是 1）filterBy = {property：“marks.subject”，value：“hindi”} //嵌套表上的过滤器

2）filterBy = {property：“name”：value：“neha”} //在父表上过滤

var app = angular.module("MyApp", []);
app.filter("filterTable", function(filterFilter) {

    return function(list, filterBy) {
        var filteredList = [],
            len,
            i,
            j,
            property,
            present,
            tempList,
            listCopy,
            properties = [];

        //creating a copy as filter will update the list and rest filter will not work properly
        listCopy = angular.copy(list);
        len = listCopy.length;

        if(filterBy.value) {

            properties = filterBy.property.split(".");

            //if filter on nested table
            if(properties.length > 1) {
                property = properties[1];

                for ( i = 0; i < len; i++) {
                    tempList = {};
                    //using filterFilter defined by angularjs
                    listCopy[i].disks = filterFilter(list[i].disks, { [property] : filterBy.value });
                    console.log(list[i].disks);
                    if(listCopy[i].disks.length) {
                        filteredList.push(listCopy[i]);
                    }  

                }
            } else {
                property = filterBy.property;

                for ( i = 0; i < len; i++) {

                    if(list[i][property].indexOf(filterBy.value) > 0) {
                        filteredList.push(list[i]);
                    }
                }
            }

            return filteredList;
        } else {
            return list;
        }
    };
});

但这将进入无限的消化周期。我在这方面花了很长时间，仍然无法解决。请帮帮我。提前谢谢。

Answer 1

这是因为你是deep copy数组。

Angular的ngRepeat并没有意识到这些对象是相同的，因为ngRepeat通过身份跟踪它们。新对象导致新的身份。这使得Angular认为自上次检查以来发生了一些变化，这意味着Angular应该运行另一个检查（也就是摘要）。

尝试不使用angular.copy()

的过滤器更新逻辑

更新

而不是angular.copy使用flat copy：

var newArray= oldArray.slice(); //克隆数组并返回对新数组的引用。

angularJS的自定义过滤器内的无限消化循环

1 个答案: