AngularJS 智能表过滤通过外部控制答案

【问题标题】：AngularJS Smart Table Filtering By External ControlAngularJS 智能表过滤通过外部控制
【发布时间】：2015-03-25 17:03:08
【问题描述】：

我正在尝试找出正确的方法来合并 st-table、st-safe-src，并通过位于表本身之外的控件过滤数据。用户可以添加、编辑和删除数据，这就是我使用安全源的原因。

任何示例或反馈都会很棒！

【问题讨论】：

标签： angularjs smart-table

【解决方案1】：

查看此示例，其中包含从智能表中添加、编辑、删除行的选项。

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>

【讨论】：

我得到了所有的部分，它是给我带来问题的外部过滤器。我有一个类别下拉列表，可根据具有上述所有功能（分页、排序、添加、编辑）的所选值过滤行
@Rajkumar - 出色的解决方案，但您能否告诉我，如果有“选择选项”（下拉菜单）而不是输入文本框，我将如何成功更新。我成功地能够在编辑时获取（使用 ng-repeat）......但是在“保存”之后，下拉列表的值似乎没有改变。