Javascript 更新元素时会显示隐藏列_Javascript_Jquery_Angularjs

Javascript 更新元素时会显示隐藏列

javascript jquery angularjs

Javascript 更新元素时会显示隐藏列,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在使用一个表，其中显示了一些对象。我正在使用jquery（很糟糕，我知道。但我唯一能做的就是）向所有具有特定ID的元素添加/删除类ng hide。这会导致一列被隐藏，并且效果良好。但是，当服务器进行任何更新时，我使用$scope.rows.push（object）和$scope.apply（）时，列的顺序就会混乱，隐藏列会立即返回 <!doctype html> <html ng-app="plunker"> <head> <script data

我正在使用一个表，其中显示了一些对象。我正在使用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;
        }
    }
  }


});


价值1
价值2
价值3
{{row.Value1}}
{{row.Value2}}
{{row.Value3}}
可见列：


{{column.id}
var app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.columnsTest=[{
id:'Value1'，
核对：正确
}, {
id:'Value2'，
核对：正确
}, {
id:'Value3'，
核对：正确
}];
$scope.rows=[{
id:1，
“值1”：911，
“价值2”：20，
“价值3”：20
}, {
id:2，
“价值1”：200，
“价值2”：20，
“价值3”：20
}];
$scope.columnToggled=函数（列）{
$（'[data col id=“'+column.id+'“]”）。每个（函数（）{
var元素=这个；
if（$（element.hasClass（'ng-hide'））{
$（element.removeClass（'ng-hide'）；
}否则{
$（element.addClass（'ng-hide'）；
}
});
};
//触发更新
setInterval（函数（）{
$scope.simulateUpdate（$scope.rows[0]）；
}, 5000);
$scope.simulateUpdates=函数（行）{
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（纽罗）；
$scope.$apply（）；
}
函数updateRow（行）{
对于（变量i=0；i<$scope.rows.length；i++）{
if（$scope.rows[i].id==row.id）{
$scope.rows[i]=行；
}
}
}
});

以下是我的问题的小规模演示：（取消选中其中一列）

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

<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>


可见列：


{{column.id}

看到了吗？不需要额外的功能：当您更改特定的列

checked

属性时，它会在所有相应的视图中自动更新

你把事情复杂化了一点：实际上，你的模型似乎很简单。关键是使用模板来正确表达它。这可能就是它的样子，例如：

<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>


可见列：


{{column.id}

看到了吗？不需要额外的功能：当您更改特定的列

checked

属性时，它会在所有相应的视图中自动更新

我已经修复了您的代码，而没有使用jQuery

<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>


{{column.id}
{{row.Value1}}
{{row.Value2}}
{{row.Value3}}
{{column.id}

您不需要将

ng change

函数绑定到输入复选框，因为您已经使用双向数据绑定将

ng model

分配给它

工作如下：

我已经修复了您的代码，而没有使用jQuery

<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>


{{column.id}
{{row.Value1}}
{{row.Value2}}
{{row.Value3}}
{{column.id}

您不需要将

ng change

函数绑定到输入复选框，因为您已经使用双向数据绑定将

ng model

分配给它

以下是工作说明：

非常感谢！我在演示中的模型有点（：）简化，但我相信这会有所帮助！你的代码对我的问题很有效。但它取决于列名，与每个单元格中的数据相同。例如，当数据为row.value1但列应为“Name”时，我应该如何执行此操作？将另一个属性-

Name

或类似属性附加到

列测试

数组的每个元素，然后在

ng-bind中使用此属性。非常感谢！我在演示中的模型有点（：）简化，但我相信这会有所帮助！你的代码对我的问题很有效。但它取决于列名，与每个单元格中的数据相同。例如，当数据为row.value1但列应为“Name”时，应如何执行此操作？将另一个属性-

Name

或类似属性附加到

列测试

数组的每个元素，然后在

绑定中使用此属性。