javascript - 过滤后如何将行推送到表中？

Question

我有一个由 ng-repeat 填充的表，我有一个链接到输入的过滤器来过滤表的结果，并且我有另一个函数，当按下按钮时，它将向表中推送新行点击。我现在的问题是，在使用过滤器后，如果不重新加载页面，添加新行将不起作用。

我怀疑我需要使用 $watch 以某种方式监视表项数组，但我只是不太明白。

请注意，我还在表格中使用 Angular Material 框架和 this 模块。

这是我的表格 HTML:

<md-card layout-padding style="width:90%;margin-top:50px;margin-left:auto;margin-right:auto;" class="md-whiteframe-5dp">
<div layout="row">
    <div flex="5"></div>
    <md-input-container flex="30">
        <label>Filter</label>
        <input ng-model="filter">
    </md-input-container>
</div>
<md-table-container style="margin-top:-40px;">
    <table md-table>
        <thead md-head md-order="query.name">
            <tr md-row>
                <th md-column></th>
                <th md-column md-order-by="name">Name</th>
                <th md-column md-order-by="position">Position</th>
                <th md-column md-order-by="startDate">Start Date</th>
                <th md-column class="noselect">Shift</th>
                <th md-column class="noselect">Phone</th>
                <th md-column class="noselect">Email</th>
                <th md-column class="noselect">CRM</th>
                <th md-column class="noselect">Xencall</th>
                <th md-column></th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row ng-repeat="tableItem in tableItems | orderBy: query.name | filter:filter">
                <td md-cell>
                    <md-button class="md-raised md-primary" href="#employee">Files</md-button>
                </td>
                <td md-cell nowrap="nowrap" ng-click="editName($event, tableItem)">{{tableItem.name || "Name"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editPosition($event, tableItem)">{{tableItem.position || "Position"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editStartDate($event, tableItem)">{{tableItem.startDate || "Start Date"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editShift($event, tableItem)">{{tableItem.shift || "Shift"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editPhone($event, tableItem)">{{tableItem.phone || "Phone Number"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editEmail($event, tableItem)">{{tableItem.email || "Email Address"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editCrm($event, tableItem)">{{tableItem.crm || "CRM"}}</td>
                <td md-cell nowrap="nowrap" ng-click="editXencall($event, tableItem)">{{tableItem.xencall || "Xencall"}}</td>
                <td md-cell>
                    <md-button class="md-raised md-accent" ng-click="removeRow($index)">Terminate</md-button>
                </td>
            </tr>
        </tbody>
    </table>
</md-table-container>

这是 Controller :

employeeMgmt.controller('tableCtrl', function ($scope, $mdEditDialog) {
$scope.tableItems = [
    {
        name: "David Wong"
        , position: "Survey Rep"
        , startDate: "2016-04-20"
        , shift: "11:00 am - 9:00 pm"
        , phone: "(123) 456-7890"
        , email: "dwong@email.com"
        , crm: "dwong"
        , xencall: "dwong"
    }
    , {
        name: "David Wang"
        , position: "Closer"
        , startDate: "2016-04-18"
        , shift: "11:00 am - 9:00 pm"
        , phone: "(123) 456-7890"
        , email: "dwong@email.com"
        , crm: "dwong"
        , xencall: "dwong"
    }
    , {
        name: "David Weng"
        , position: "Jr Broker"
        , startDate: "2016-04-22"
        , shift: "11:00 am - 9:00 pm"
        , phone: "(123) 456-7890"
        , email: "dwong@email.com"
        , crm: "dwong"
        , xencall: "dwong"
    }
    , {
        name: "David Wung"
        , position: "Survey Rep"
        , startDate: "2016-04-19"
        , shift: "11:00 am - 9:00 pm"
        , phone: "(123) 456-7890"
        , email: "dwong@email.com"
        , crm: "dwong"
        , xencall: "dwong"
    }
    , {
        name: "David Wyng"
        , position: "Closer"
        , startDate: "2016-04-21"
        , shift: "11:00 am - 9:00 pm"
        , phone: "(123) 456-7890"
        , email: "dwong@email.com"
        , crm: "dwong"
        , xencall: "dwong"
    }
    , {
        name: "David Wing"
        , position: "Survey Rep"
        , startDate: "2016-04-20"
        , shift: "11:00 am - 9:00 pm"
        , phone: "(123) 456-7890"
        , email: "dwong@email.com"
        , crm: "dwong"
        , xencall: "dwong"
    }
];
$scope.query = {
    order: 'name'
};
$scope.addRow = function () {
    var tableItem = {
        name: $scope.name
        , position: $scope.position
        , startDate: $scope.startDate
        , shift: $scope.shift
        , phone: $scope.phone
        , email: $scope.email
        , crm: $scope.crm
        , xencall: $scope.xencall
    };
    $scope.tableItems.push(tableItem);
};
$scope.removeRow = function (index) {
    $scope.tableItems.splice(index, 1);
};
});

Answer 1

编辑:由于您允许添加空白行，因此您需要添加track by $index。

ng-repeat="tableItems 中的 tableItem | 过滤器:按 $index 过滤轨道"

您试图将重复的人员添加到您的数组中，这会破坏您的表格。这是一个正在工作的笨蛋:http://plnkr.co/edit/HpZrufhS5jzSi3EpYHPk?p=preview

在添加到数组之前，您需要添加 angular.equals 检查。

$scope.addRow = function(emp) {

  //check for duplicates
  for(var i = 0; i < $scope.tableItems.length; ++i) {
    if(angular.equals($scope.tableItems[i], emp)) {
      return; //break if found
    }
  }

  //go ahead and add
  $scope.tableItems.push(emp);
}