AngularJS Smart Table Filtering By External Control

问题

I am trying to figure out the correct way to incorporate st-table, st-safe-src, and filtering of the data by a control that lives outside of the table itself. Users can add, edit, and delete data so this is why i am using the safe source.

any examples or feedback would be great!

回答1:

Checkout this example which contains option to Add, Edit, Delete rows from the Smart-Table.

http://plnkr.co/edit/DtD4xC

javascript

angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', function($scope) {
  $scope.rowCollection = [{
    id: 100,
    firstName: 'Laurent',
    lastName: 'Renard',
    birthDate: new Date('1987-05-21'),
    balance: 102,
    email: 'whatever@gmail.com'
  }, {
    id: 101,
    firstName: 'Blandine',
    lastName: 'Faivre',
    birthDate: new Date('1987-04-25'),
    balance: -2323.22,
    email: 'oufblandou@gmail.com'
  }, {
    id: 102,
    firstName: 'Francoise',
    lastName: 'Frere',
    birthDate: new Date('1955-08-27'),
    balance: 42343,
    email: 'raymondef@gmail.com'
  }];
  var id = 1;
  $scope.edit = false;
  $scope.addRandomItem = function addRandomItem() {
    $scope.editrow = {id:++id};
    $scope.edit = true;
  };

  $scope.removeItem = function removeItem(row) {
    var index = $scope.rowCollection.indexOf(row);
    if (index !== -1) {
      $scope.rowCollection.splice(index, 1);
    }
  }

  $scope.editItem = function editItem(row) {
    $scope.editrow = angular.copy(row);
    $scope.edit = true;
  }

  $scope.saveItem = function saveItem(editrow) {
    var index;
    var itemStatus=false;

    for (index = 0; index < $scope.rowCollection.length; index++) {
      if ($scope.rowCollection[index].id === editrow.id) {
        itemStatus=true;
        break;
      }
    }
    if (itemStatus) {
      console.log("Replacing item:"+editrow.id);
      $scope.rowCollection.splice(index, 1, editrow);
      $scope.editrow = {id:++id};
    }
    else {
      console.log("Adding item:"+editrow.id);
      $scope.rowCollection.push(editrow);
      $scope.editrow = {id:++id};
    }
    $scope.edit = false;
  }

}]);

html

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="smart-table.debug.js"></script>
    <script src="lrInfiniteScrollPlugin.js"></script>
  </head>
  <body ng-controller="mainCtrl">
    <h3>Basic Smart-Table Starter</h3>
    <button type="button" ng-click="addRandomItem()" class="btn btn-sm btn-success">
      <i class="glyphicon glyphicon-plus">
      </i> Add random item
    </button>
    <table ng-show="edit">
      <tbody>
        <tr>
          <th>first name</th>
          <th>last name</th>
          <th>birth date</th>
          <th>balance</th>
          <th>email</th> 
          <th>action</th>
        </tr>
        <tr>
          <td><input data-ng-model="editrow.firstName" type="text" class="form-control"
                     placeholder="Enter first name" /></td>
          <td><input data-ng-model="editrow.lastName" type="text" class="form-control"
                     placeholder="Enter last name" /></td>
          <td><input data-ng-model="editrow.birthDate" type="text" class="form-control"
                     placeholder="Enter brith date" /></td>
          <td><input data-ng-model="editrow.balance" type="text" class="form-control"
                     placeholder="Enter balance" /></td>
          <td><input data-ng-model="editrow.email" type="text" class="form-control"
                     placeholder="Enter email" /></td>
          <td><button type="button" ng-click="saveItem(editrow)" class="btn btn-sm btn-success">Save</button></td>
        </tr>
      </tbody>
    </table>
    <table st-table="rowCollection" class="table table-striped">
      <thead>
        <tr>
          <th>first name</th>
          <th>last name</th>
          <th>birth date</th>
          <th>balance</th>
          <th>email</th>
          <th>edit</th>
          <th>delete</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in rowCollection">
          <td>{{row.firstName}}</td>
          <td>{{row.lastName}}</td>
          <td>{{row.birthDate | date:'shortDate'}}</td>
          <td>{{row.balance}}</td>
          <td>{{row.email}}</td>
          <td>
            <button type="button" ng-click="editItem(row)" class="btn btn-sm btn-danger">
              <i class="glyphicon glyphicon-remove-circle">
              </i>
            </button>
          <td>
            <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
              <i class="glyphicon glyphicon-remove-circle">
              </i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

来源：https://stackoverflow.com/questions/29261957/angularjs-smart-table-filtering-by-external-control

标签

angularjs

smart-table