行をフィルタリングしてテーブルにプッシュするにはどうすればよいですか？

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

編集：空白行の追加を許可しているため、track by $indexを追加する必要があります。

NG・リピート=「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

あなたはフィルタ入力を清掃していることを確認してください。フィルター入力に値があり、新しい項目がフィルター条件と一致しない可能性があります