ngtable

this is ngtable + multiselect

by Rahul Bapat

HTML

<script src="http://cdn.jsdelivr.net/angular.ngtable/0.3.2/ng-table.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/angular.ngtable/0.3.2/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div class="row">
    <div class="col-md-6" ng-controller="demoController as demo">
      <h3>ngTable directive</h3>
      <div class="brn-group pull-right">
        <button class="btn btn-default" ng-if="demo.isEditing" ng-click="demo.cancelChanges()">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
        <button class="btn btn-primary" ng-if="!demo.isEditing" ng-click="demo.isEditing = true">
          <span class="glyphicon glyphicon-pencil"></span>
        </button>
        <button class="btn btn-primary" ng-if="demo.isEditing" ng-disabled="!demo.hasChanges() || demo.tableTracker.$invalid" ng-click="demo.saveChanges()">
          <span class="glyphicon glyphicon-ok"></span>
        </button>
        <button class="btn btn-default" ng-click="demo.add()">
          <span class="glyphicon glyphicon-plus"></span>
        </button>
      </div>
      <table ng-table="demo.tableParams" class="table table-bordered table-hover table-condensed editable-table" ng-form="demo.tableForm" disable-filter="demo.isAdding" demo-tracked-table="demo.tableTracker">
        <colgroup>
          <col width="70%" />
          <col width="12%" />
          <col width="13%" />
          <col width="5%" />
        </colgroup>
        <tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">
          <td title="'Name'" filter="{name: 'text'}" sortable="'name'" ng-switch="demo.isEditing" ng-class="name.$dirty ? 'bg-warning' : ''" ng-form="name" demo-tracked-table-cell>
            <span ng-switch-default class="editable-text">{{row.name}}</span>
            <div class="controls" ng-class="name.$invalid && name.$dirty ? 'has-error' : ''" ng-switch-when="true">
              <input...

JavaScript

angular.module("myApp", ["ngTable", "ngTableDemos"]);

(function() {
  "use strict";

  angular.module("myApp").controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "ngTableSimpleList"];

  function demoController(NgTableParams, simpleList) {
    var self = this;

    var originalData = angular.copy(simpleList);

    self.tableParams = new NgTableParams({}, {
      dataset: angular.copy(simpleList)
    });

    self.deleteCount = 0;

    self.add = add;
    self.cancelChanges = cancelChanges;
    self.del = del;
    self.hasChanges = hasChanges;
    self.saveChanges = saveChanges;

    //////////

    function add() {
      self.isEditing = true;
      self.isAdding = true;
      self.tableParams.settings().dataset.unshift({
        name: "",
        age: null,
        money: null
      });
      // we need to ensure the user sees the new row we've just added.
      // it seems a poor but reliable choice to remove sorting and move them to the first page
      // where we know that our new item was added to
      self.tableParams.sorting({});
      self.tableParams.page(1);
      self.tableParams.reload();
    }

    function cancelChanges() {
      resetTableStatus();
      var currentPage = self.tableParams.page();
      self.tableParams.settings({
        dataset: angular.copy(originalData)
      });
      // keep the user on the current page when we can
      if (!self.isAdding) {
        self.tableParams.page(currentPage);
      }
    }

    function del(row) {
      _.remove(self.tableParams.settings().dataset, function(item) {
        return row === item;
      });
      self.deleteCount++;
      self.tableTracker.untrack(row);
      self.tableParams.reload().then(function(data) {
        if (data.length === 0 && self.tableParams.total() > 0) {
          self.tableParams.page(self.tableParams.page() - 1);
          self.tableParams.reload();
        }
      });
    }

    function hasChanges() {
      return...