Как я могу нажать строку в таблицу после ее фильтрации?

Question

У меня есть таблица, заполняемая ng-repeat, у меня есть фильтр, связанный с входом для фильтрации результатов таблицы, и у меня есть другая функция, которая будет вызывать новую строку в таблицу при нажатии кнопки , Моя проблема прямо сейчас заключается в том, что добавление новой строки не работает после того, как фильтр используется без перезагрузки страницы.

Я подозреваю, что мне нужно использовать $ watch, чтобы каким-то образом контролировать массив элементов таблицы, но я просто не могу это понять.

Обратите внимание, что я также использую каркас с угловым материалом и модуль 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

Edit: Потому что вы позволяете добавление пустых строк, вам нужно добавить track by $index.

нг-повтор = «TableItem в tableItems | фильтр: фильтр трэк $ индексом»

Вы пытаетесь добавить дубликаты людей в массив, и это разорвать таблицу. Вот рабочий плункер: 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); 
} 

Answer 2

Убедитесь, что вы чистите вход фильтра. Может быть, входной фильтр имеет значение и новый элемент не соответствует критериям фильтра