[Solved] How to make excel like cell in javascript or Angularjs dynamically?

Question

…in real app, i will have data for some cells like:… how can i set those value on specific cells and have different bg color?

You can keep loadData the same and change $scope.getWeight to accommodate the format of the data. This takes a dependency on lodash’s find, since that makes things more concise. If you don’t want to do that you can replace _.find with your own find method that does the same thing – I’ll leave that as an exercise for you 🙂

http://plnkr.co/edit/b0q4qTyNjQp7J2IB7ayf?p=preview

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js"></script>

JavaScript

$scope.getWeight = function (row, column) {
  if ($scope.weights) {
    // See if there's a record with the row and column.
    var record = _.find($scope.weights, {
      row: row,
      column: column
    });

    // Was a record found with the row and column?
    if (record) {
      // If so return its weight.
      return record.weight;
    }
  }
};

Staff will select cell and input goods weight(in bootstrap modal). Then save. Next time if a cell/slot has weight before, it will be in different color(red-means the cell/slot is already filled with goods) and if he click on that cell , all details will be shown regarding to that cell like weight…How can make query to get details from database to have my cell filled with color and show details if the cell has details before?

I didn’t completely understand, but here’s roughly what you could do for the parts I did understand. This assumes you have 3 endpoints – GET api/weights to get the weights; GET api/weight to get the weight for a single cell and POST api/weight to update a weight. You’ll need to replace fakeHttp with $http and the actual url’s. I don’t know what Yard or Yard_id is.

http://plnkr.co/edit/aAiYbChTqmAwgky0WOJ3?p=preview

// TODO: Replace fakeHttp with $http

var module = angular.module('myApp', ['ui.bootstrap']);

module.controller('MainCtrl', function ($scope, $uibModal, fakeHttp) {
  $scope.rows = [
    'A',
    'B'
  ];

  $scope.columns = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10  
  ];

  $scope.select = function (row, column) {
    var modalInstance = $uibModal.open({
      templateUrl: 'myModal.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        row: function () {
          return row;
        },
        column: function () {
          return column;
        }
      }
    });

    modalInstance.result.then(loadData);
  };

  $scope.getWeight = function (row, column) {
    if ($scope.weights) {
      var key = createKey({
        row: row,
        column: column
      });

      return $scope.weights[key];
    }
  };

  loadData();

  function loadData() {
    fakeHttp.get('api/weights').then(function (result) {
      $scope.weights = result.data;
    });
  };

  function createKey(data) {
    var key = {
      row: data.row,
      column: data.column
    };

    return JSON.stringify(key);
  }
});

module.controller('ModalInstanceCtrl', function ($scope, row, column, fakeHttp, $uibModalInstance) {
  $scope.row = row;
  $scope.column = column;

  fakeHttp.get('api/weight', {
    row: row,
    column: column
  }).then(function (result) {
    $scope.weight = result.data;
  });

  $scope.save = function () {
    fakeHttp.post('api/weight', {
      row: row,
      column: column,
      weight: $scope.weight
    }).then(function () {
      $uibModalInstance.close();
    });
  };
});

module.factory('fakeHttp', function ($q) {
  var fakeHttp = {};

  var database = {};

  database[createKey({
    row: 'A',
    column: 1
  })] = 12;

  fakeHttp.get = function (url, data) {
    if (url === 'api/weight') {
      var key = createKey(data);
      return $q.when({ data: 
        database[key]
      });
    } else if (url === 'api/weights') {
      return $q.when({ data: 
        database
      });
    } else {
      alert('invalid url: ' + url);
    }
  };

  fakeHttp.post = function (url, data) {
    if (url === 'api/weight') {
      var key = createKey(data);
      database[key] = data.weight;
      return $q.when({});
    } else {
      alert('invalid url: ' + url);
    }
  };

  return fakeHttp;

 function createKey(data) {
    var key = {
      row: data.row,
      column: data.column
    };

    return JSON.stringify(key);
 }
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table border="1" cellspacing="0">
      <tbody>
        <tr ng-repeat="row in rows">
          <td ng-repeat="column in columns" style="width: 100px; cursor: pointer" 
            ng-style="{ background: getWeight(row, column) ? 'red' :  '' }"
            ng-click="select(row, column)">
            {{row}}{{column}}
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

myModal.html

<div class="modal-body">
  Please enter weight for {{ row }}{{ column }}
  <input type="text" class="form-control" 
    ng-model="weight" />
  <button class="btn btn-primary"
    ng-click="save()">Save</button>
</div>

How can i make every cell clickable?

Here’s how to make every cell clickable in AngularJS.

http://plnkr.co/edit/XKa5WwjyYTugDZ744iWB?p=preview

Your question was very unclear. I couldn’t tell what you wanted, exactly.

JavaScript:

module.controller('MainCtrl', function($scope) {
  $scope.rows = [
    'A',
    'B'
  ];

  $scope.columns = [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10
  ];

  $scope.select = function(row, column) {
    if ($scope.selectedRow === row && $scope.selectedColumn === column) {
      $scope.selectedRow = undefined;
      $scope.selectedColumn = undefined;
    } else {
      $scope.selectedRow = row;
      $scope.selectedColumn = column;
    }
  };
});

HTML:

<body ng-controller="MainCtrl">
  <table border="1" cellspacing="0">
    <tbody>
      <tr ng-repeat="row in rows">
        <td ng-repeat="column in columns" style="width: 100px; cursor: pointer"
          ng-click="select(row, column)"
          ng-style="{ background: row == selectedRow && column == selectedColumn ? 'yellow' : 'none' }">
          {{row}}{{column}}
        </td>
      </tr>
    </tbody>
  </table>

  <br>

  Selected (row, column): 
  <br>
  ({{selectedRow || 'undefined'}}, {{selectedColumn || 'undefined'}})
</body>

Accepted Answer