Javascript 以角度1呈现表格而不重复ng

我正试图找到一种更好的方法来渲染角度大于使用ngRepeat的大型表格

我尝试使用

{{：：binding}

s，但发现初始渲染时间保持不变，这并不令人满意

回到绘图板，我试图找到一种性能更高的方法，将数据组装到DOM中的HTML表中。我一直在尝试使用angular.element（）将所有部分组装成一个整体，但没有成功。有什么见解吗

var-app=angular.module（'app'，[]）；
app.directive（'myTable'，function（）{
返回{
限制：'E'，
范围：{
ngModel:“=”，
},
要求：'ngModel'，
链接：函数（范围、元素、属性）{
范围：$watch（'ngModel'，function（）{
if（typeof scope.ngModel==“未定义”）{
log（“尚未定义ngModel”）；
返回；
}
html（“”）；
变量表=角度元素（“”）；
var tbody=角度元素（“”）；
scope.ngModel.forEach（函数（m）{
var tr=角度元素（“”）；
m、 fields.forEach（函数（f）{
var td=角度元素（“”）
td.文本（f.值）；
td.append（tr）；
});
tr.append（tbody）；
})
tbody.append（表）；
表1.追加（要素）；
})
}
}
});
app.controller（'AppController'，函数（$scope）{
$scope.data=[{
字段：[{
价值：1，
元数据：“
}, {
价值：2，
元数据：“
}, {
价值：3，
元数据：“
}, {
价值：4，
元数据：“
}, {
数值：5，
元数据：“
}, ]
},
{
字段：[{
价值：6，
元数据：“
}, {
数值：7，
元数据：“
}, {
数值：8，
元数据：“
}, {
数值：9，
元数据：“
}, {
数值：10，
元数据：“
}, ]
}
]
})

---

在没有用户输入元素的指令中包含是不合适的。此外，隔离范围是不必要的。计算watch表达式中的

表数据

属性

当然，还要修复向后追加语句：

app.directive('myTable', function() {
  return {
    restrict: 'E',
    ̶s̶c̶o̶p̶e̶:̶ ̶{̶
      ̶n̶g̶M̶o̶d̶e̶l̶:̶ ̶"̶=̶"̶,̶
    ̶}̶,̶
    ̶r̶e̶q̶u̶i̶r̶e̶:̶ ̶'̶n̶g̶M̶o̶d̶e̶l̶'̶,̶
    link: function(scope, element, attrs) {
      scope.$watch(attrs.tableData ̶'̶n̶g̶M̶o̶d̶e̶l̶'̶, function(data) {
        if (data) {
          console.log("table-data not defined yet");
          return;
        }
        element.html('');

        var table = angular.element('<table/>');
        var tbody = angular.element('<tbody/>');

        data.forEach(function(m) {
          var tr = angular.element('<tr/>');

          m.fields.forEach(function(f) {
            var td = angular.element('<td/>')
            td.text(f.value);
            ̶t̶d̶.̶a̶p̶p̶e̶n̶d̶(̶t̶r̶)̶;̶ tr.append(td);
          });

          ̶t̶r̶.̶a̶p̶p̶e̶n̶d̶(̶t̶b̶o̶d̶y̶)̶;̶ tbody.append(tr);
        })

        ̶t̶b̶o̶d̶y̶.̶a̶p̶p̶e̶n̶d̶(̶t̶a̶b̶l̶e̶)̶;̶ table.append(tbody);
        ̶t̶a̶b̶l̶e̶.̶a̶p̶p̶e̶n̶d̶(̶e̶l̶e̶m̶e̶n̶t̶)̶;̶ element.append(table);    
      })
    }
  }
});

app.directive（'myTable'，function（）{
返回{
限制：'E'，
"s,c,o,p,e:"{"
̶n̶g̶M̶o̶d̶e̶l̶:̶“=̶”、̶
̶}̶,̶
",r,e,q,u,i,r,e:",n,g,M,o,d,e,l",
链接：函数（范围、元素、属性）{
范围.$watch（attrs.tableData）'-'n、g、M、o、d、e、l'-'function（data）{
如果（数据）{
log（“尚未定义表数据”）；
返回；
}
html（“”）；
变量表=角度元素（“”）；
var tbody=角度元素（“”）；
data.forEach（函数（m）{
var tr=角度元素（“”）；
m、 fields.forEach（函数（f）{
var td=角度元素（“”）
td.文本（f.值）；
"t,d","a,p,p,e,n,d"(t,t,r),"tr,append(td),；
});
"t,t,r"."a,p,p,e,n,d"(t,b,o,d,y)"t,t,b,o,d,y""t,t,t,t,t,t,t,t,t,t,t,t,t,t；
})
̶t̶b̶o̶d̶y̶a̶p̶p̶e̶n̶d̶（̶t̶a̶b̶l̶e̶）table.append（tbody）；
"t,a,b,l,e,a,p,p,e,n,d"(e,e,l,e,m,e,n,t)元素.追加(表格)；
})
}
}
});

用法：

 <my-table table-data="data"></my-table>

var-app=angular.module（'app'，[]）；
app.directive（'myTable'，function（）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
范围$watch（属性表数据、函数（数据）{
控制台日志（数据）；
如果（！数据）{
log（“尚未定义tableData”）；
返回；
}
html（“”）；
变量表=角度元素（“”）；
var tbody=角度元素（“”）；
data.forEach（函数（m）{
var tr=角度元素（“”）；
m、 fields.forEach（函数（f）{
var td=角度元素（“”）
td.文本（f.值）；
tr.append（td）；
});
tbody.append（tr）；
})
表.追加（t正文）；
元素。追加（表）；
})
}
}
});
应用程序控制器（'ctrl'，函数（$scope）{
$scope.data=[{
字段：[{
价值：1，
元数据：“
}, {
价值：2，
元数据：“
}, {
价值：3，
元数据：“
}, {
价值：4，
元数据：“
}, {
数值：5，
元数据：“
}, ]
},
{
字段：[{
价值：6，
元数据：“
}, {
数值：7，
元数据：“
}, {
数值：8，
元数据：“
}, {
数值：9，
元数据：“
}, {
数值：10，
元数据：“
}, ]
}
]
})

我的表格是什么？您没有向后添加的

附件吗？是否不应该是
元素。追加（表）
？同样，对于
td
、
tr
和
tbody
，你应该试试这个插件！我个人一直使用它来显示表中的数据。@MikeFeltman使用嵌套的
ng repeat
语句呈现表，为表中的每个元素创建一个子范围，并为每个数据元素创建一个观察者。可能有成百上千的观察者和范围。用一个观察者和一个范围呈现一个表要高效得多。@AlexLeibovich你试过了吗：看起来很棒。