Updatable Grid using angularjs and php (backend)

Question

I have to create an updatable grid like this.

Users will edit this grid and updated information will be saved to db asynchronously. Since multiple users works on same grid, when other user update a particular column , change shall be reflected to all users.

I am new to angularjs. How shall i implement this functionality using angularjs with backend in php.

Answer 1

Your problem seems to be bigger than just updating a grid with AngularJS, so there are some points to consider:

communication of multiple users

You may want to use WebSockets to provide real-time communication across multiple clients. On the php side you could use something like Ratchet to provide WebSockets and on the client side you interact with them using angular-websocket. The client part would look like

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

If that's too much you can always poll the state of your grid from the server using ajax and provide a pseudo-realtime communication. This could look like

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

However, I'd really recommend digging into WebSockets - they are what you want.

the grid itself

Once you have your state updated using either WebSockets or ajax polls, you could have a fully flexible 2d grid as follows:

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