THE DEMO

Question

我试图在Angular中找到一种比使用ngRepeat更好的渲染大表的方法。

我尝试使用one-time {{::binding}} s，但发现初始渲染时间保持不变，这并不令人满意。

回到绘图板，我试图找到一种更高效的方法，将数据组装到DOM中的HTML表中。我一直在尝试使用angular.element（）将所有部分组合成一个整体，但没有运气。任何见解？

＆＃13;

var app = angular.module('app', []);

app.directive('myTable', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: "=",
    },
    require: 'ngModel',
    link: function(scope, element, attrs) {
      scope.$watch('ngModel', function() {

        if (typeof scope.ngModel == 'undefined') {
        console.log("ngModel not defined yet");
          return;
        }
        element.html('');

        var table = angular.element('<table/>');
        var tbody = angular.element('<tbody/>');

        scope.ngModel.forEach(function(m) {
          var tr = angular.element('<tr/>');

          m.fields.forEach(function(f) {
            var td = angular.element('<td/>')
            td.text(f.value);
            td.append(tr);
          });

          tr.append(tbody);
        })

        tbody.append(table);
        table.append(element);

      })
    }
  }
});

app.controller('AppController', function($scope) {
  $scope.data = [{
      fields: [{
        value: 1,
        metadata: ""
      }, {
        value: 2,
        metadata: ""
      }, {
        value: 3,
        metadata: ""
      }, {
        value: 4,
        metadata: ""
      }, {
        value: 5,
        metadata: ""
      }, ]
    },
    {
      fields: [{
        value: 6,
        metadata: ""
      }, {
        value: 7,
        metadata: ""
      }, {
        value: 8,
        metadata: ""
      }, {
        value: 9,
        metadata: ""
      }, {
        value: 10,
        metadata: ""
      }, ]
    }
  ]
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>
  <div ng-app="app" ng-controller="AppController">
    <my-table ng-model="data"></my-table>
  </div>
</body>

＆＃13;

Answer 1

将ngModel controller包含在没有用户输入元素的指令中是不合适的。也不需要隔离范围。评估监视表达式中的table-data属性。

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

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);    
      })
    }
  }
});

用法：

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

THE DEMO

var app = angular.module('app', []);

app.directive('myTable', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.$watch(attrs.tableData, function(data) {
        console.log(data);
        if (!data) {
          console.log("tableData 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);
            tr.append(td);
          });
          
          
          tbody.append(tr);
        })

        table.append(tbody);
        element.append(table);

      })
    }
  }
});

app.controller('ctrl', function($scope) {
  $scope.data = [{
      fields: [{
        value: 1,
        metadata: ""
      }, {
        value: 2,
        metadata: ""
      }, {
        value: 3,
        metadata: ""
      }, {
        value: 4,
        metadata: ""
      }, {
        value: 5,
        metadata: ""
      }, ]
    },
    {
      fields: [{
        value: 6,
        metadata: ""
      }, {
        value: 7,
        metadata: ""
      }, {
        value: 8,
        metadata: ""
      }, {
        value: 9,
        metadata: ""
      }, {
        value: 10,
        metadata: ""
      }, ]
    }
  ]
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <my-table table-data="data"></my-table>
  </body>

在Angular 1中渲染表而不使用ng-repeat

1 个答案:

THE DEMO