Question

我使用的表格中显示了一些对象。我使用jquery（糟糕，我知道。但我唯一能做的事情）来添加/删除具有特定ID的所有元素的类ng-hide。这会导致列被隐藏，并且工作正常。但是当来自服务器的任何更新出现并且我使用$ scope.rows.push（object）和$ scope.apply（）时，列的顺序变得混乱并且隐藏的列立即返回..

<!doctype html>
<html ng-app="plunker">

<head>
<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
<div ng:controller="MainCtrl">

<table>
  <thead style="font-weight: bold;">
    <tr>

      <td class="text-right" data-col-id="Value1">Value1</td>
      <td class="text-right" data-col-id="Value2">Value2</td>
      <td class="text-right" data-col-id="Value3">Value3</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td class="text-right" data-col-id="Value1">{{row.Value1}}</td>
      <td class="text-right" data-col-id="Value2">{{row.Value2}}</td>
      <td class="text-right" data-col-id="Value3">{{row.Value3}}</td>
    </tr>
  </tbody>
</table>

<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
  <input type="checkbox" ng-model="column.checked" ng-change="columnToggled(column)"> {{column.id}}
</div>


</div>




<script>
var app = angular.module('plunker', []);




app.controller('MainCtrl', function($scope) {
  $scope.columnsTest = [{
    id: 'Value1',
    checked: true
  }, {
    id: 'Value2',
    checked: true
  }, {
    id: 'Value3',
    checked: true
  }];


  $scope.rows = [{
    id: 1,
    "Value1": 911,
    "Value2": 20,
    "Value3": 20
  }, {
    id: 2,
    "Value1": 200,
    "Value2": 20,
    "Value3": 20
  }];


  $scope.columnToggled = function(column) {
    $('[data-col-id="' + column.id + '"]').each(function() {
      var element = this;
      if ($(element).hasClass('ng-hide')) {
        $(element).removeClass('ng-hide');
      } else {
        $(element).addClass('ng-hide');
      }
    });
  };



  //trigger update
  window.setInterval(function() {
    $scope.simulateUpdates($scope.rows[0]);
  }, 5000);


  $scope.simulateUpdates = function (row) {

    var newRow = 
    {
      id: 1,
      "Value1": Math.floor(Math.random() * 100) + 1,
      "Value2": Math.floor(Math.random() * 100) + 1,
      "Value3": Math.floor(Math.random() * 100) + 1
    }

    updateRow(newRow);
    $scope.$apply();
  }


  function updateRow(row) {
    for (var i = 0; i < $scope.rows.length; i++) {
        if ($scope.rows[i].id === row.id) {
            $scope.rows[i] = row;
        }
    }
  }


});

以下是我的问题的小规模演示：http://plnkr.co/edit/1tGci7qX9ZFIk69uNfIf?p=preview（取消选中其中一列）

Answer 1

你稍微复杂一点：你的模型实际上看起来很简单。关键是使用模板来正确表达它。这就是它的样子，例如：

<table>
  <thead>
    <tr>
      <th class="text-right" ng-repeat="column in columnsTest"
          ng-if="column.checked" ng-bind="column.id"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows">
      <td ng-repeat="column in columnsTest" 
          ng-if="column.checked" ng-bind="row[column.id]"></td>
    </tr>
  </tbody>
</table>

<p>Visible Columns:</p>
<br />
<div class="cbxList" ng-repeat="column in columnsTest">
  <input type="checkbox" ng-model="column.checked">{{column.id}}
</div>

请参阅？不需要额外的功能：当您更改特定列checked属性时，它会在所有相应的视图中自动更新。

Demo

Answer 2

我已修复您的代码而不使用 jQuery 。

uncaught SyntaxError: Unexpected token < - http:1
uncaught SyntaxError: Unexpected token < - angular2-polyfills.js:138
    evaluating http://localhost:3000/angular2/http
    error loading http://localhost:3000/app/boot.js

您不需要将<table> <thead style="font-weight: bold;"> <tr> <th ng-repeat="column in columnsTest" class="text-right" data-col-id="column.id" ng-show="column.checked"> {{column.id}} </th> </tr> </thead> <tbody> <tr ng-repeat="row in rows"> <td class="text-right" data-col-id="Value1" ng-show="columnsTest[0].checked">{{row.Value1}}</td> <td class="text-right" data-col-id="Value2" ng-show="columnsTest[1].checked">{{row.Value2}}</td> <td class="text-right" data-col-id="Value3" ng-show="columnsTest[2].checked">{{row.Value3}}</td> </tr> </tbody> </table> <div class="cbxList" ng-repeat="column in columnsTest"> <input type="checkbox" ng-model="column.checked">{{column.id}} </div>函数绑定到输入复选框，因为您已使用双向数据绑定为ng-change分配了它。

以下是工作：Plunker

更新元素

2 个答案: