使用 angularjs 和 php（后端）的可更新网格答案

【问题标题】：Updatable Grid using angularjs and php (backend)使用 angularjs 和 php（后端）的可更新网格
【发布时间】：2014-06-13 13:07:13
【问题描述】：

我必须像这样创建一个可更新的网格。

用户将编辑此网格，更新的信息将异步保存到数据库。由于多个用户在同一个网格上工作，当其他用户更新特定列时，更改应反映给所有用户。

我是 angularjs 的新手。我应该如何在 php 中使用带有后端的 angularjs 来实现这个功能。

【问题讨论】：

stackoverflow.com/a/24206272/1654026

标签： php angularjs

【解决方案1】：

您的问题似乎不仅仅是使用 AngularJS 更新网格，所以有几点需要考虑：

多用户交流

您可能希望使用WebSockets 提供跨多个客户端的实时通信。在 php 端，您可以使用 Ratchet 之类的东西来提供 WebSocket，在客户端，您可以使用 angular-websocket 与它们进行交互。客户端部分看起来像

WebSocket.onmessage(function(event) {
  // update the state
});

如果这太多了，您可以随时使用 ajax 从服务器轮询网格状态并提供伪实时通信。这可能看起来像

$interval($http.get('your url').success(function(result) {
  // update the state
}), 30 * 1000) // polls every 30 seconds

但是，我真的建议您深入研究 WebSockets - 它们是您想要的。

网格本身

一旦您使用 WebSockets 或 ajax 轮询更新了您的状态，您就可以拥有一个完全灵活的二维网格，如下所示：

// the controller
.controller('GridCtrl', function($scope, WebSocket) {
  WebSocket.onmessage(function(event) {
    $scope.grid = event.data;
  });
  $scope.updateGrid = function() {
    WebSocket.send($scope.grid);
  });
})

<!-- the template -->
<form ng-submit="updateGrid()">
  <div class="row" ng-repeat="row in grid">
    <div class="col" ng-repeat="col in row">
      <input ng-model="col">
    </div>
  </div>
</form>

【讨论】：