javascript - 在 jQuery 数据表中使用 AngularJS 观察器的方法是什么

Question

我们的要求是在单页中显示 1000 多行，但我们还应该在其中一列中显示/隐藏按钮。该按钮将由 NG 观察者在执行某些操作时切换。我们在显示这么多记录时没有遇到问题，但使用观察程序时性能会下降 - 显而易见的原因是观察程序与行数成正比

1. 我们不想分页
2. 我们希望利用 AngularJS 观察者和 ng-models

请有人建议是否有 jQuery 数据表的替代方案或任何在不影响性能的情况下使用观察器的技巧。

Answer 1

如果没有看到代码，听起来您正在为表中的每一行创建一个 $scope.$watch 。您看到性能问题并不奇怪。相反，我会做这样的事情，它响应 ng-click 来更改行状态 Plunker Here :

View.html

<div ng-repeat="item in items">
  {{item.name}}
  <div ng-show="showHide[$index]===false">
    Showing Me for index {{$index}}
  </div>
  <button ng-click="toggle($index)">
    <span ng-show="showHide[$index]===true || showHide[$index]===undefined">Show</span>
    <span ng-show="showHide[$index]===false">Hide</span>
  </button>
</div>

Controller.js

var app = angular.module('app', []);

app.controller('demoController', function($scope) {

  $scope.input = [];
  $scope.editing = {};

  $scope.items = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}, {id: 3, name: 'Three'}]
  $scope.showHide = {};

  $scope.toggle = function(index) {
    if ($scope.showHide[index] === undefined) {
      $scope.showHide[index] = true; // assume show is default
    }
    $scope.showHide[index] = !$scope.showHide[index];
  }

});