在 jQuery 数据表中使用 AngularJS 观察者的方法是什么答案

【问题标题】：Whats the approach to make use of AngularJS watchers in jQuery datatables在 jQuery 数据表中使用 AngularJS 观察者的方法是什么
【发布时间】：2016-03-30 15:14:48
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery angularjs

【解决方案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];
  }

});

【讨论】：