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>

这是控制器：

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

确保清洁过滤器输入。也许过滤器输入有一个值，新项目与过滤条件不匹配

Answer 2

修改：由于您允许添加空白行，因此您需要添加track by $index。

ng-repeat =“tableItem in tableItems | filter：filter track track by $ 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);
}

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

2 个答案: