angularjs中的ng-repeat過濾器數據不起作用

Question

我有一個看起來像這樣的數據設置

$scope.friends = [
    {
      name: function() {
        return 'steve';
      },
      number: function() {
        return 555;
      }
    },
    {
      name: function() {
        return 'mary';
      },
      number: function() {
        return 555;
      }
    },
    {
      name: function() {
        return 'jo';
      },
      number: function() {
        return 888;
      }
    }
  ]

現在我想要的是基於文本輸入過濾ng-repeat上的數據。

<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th></tr>
  <tr ng-repeat="friend in friends | filter:search">
    <td>{{friend.name}}</td>
    <td>{{friend.number}}</td>
  </tr>
</table>

輸入的定義方式如<input type="text" ng-model="search.name"/> 。 但是過濾器不起作用，我嘗試過來看是否修改了這樣的數據結構

$scope.friends = [
{
  name:'steve',
  number: 555          
},
{
  name:'marry',
  number: 555
},
{
 name:'steve',
  number: 888
} 

 ]

那么只有這樣才能起作用。但是我想保持數據結構不變。

任何人都可以幫忙，如何過濾具有上述數據結構的數據。

plnkr示例 。

Answer 1

您可以修改friends數據以達到此要求。 我所做的是使用angular.forEach()函數修改數據並將其放入名為$scope.modifiedFriends的新數組中。

$scope.modifiedFriends = [];
angular.forEach($scope.friends, function(friend) {
    $scope.modifiedFriends.push({
        name: friend.name(),
        number: friend.number()
    });
});

而不是重復對friends進行重復，而不是對modifiedFriends進行重復。

<tr ng-repeat="friend in modifiedFriends | filter:search">
    <td>{{friend.name}}</td>
    <td>{{friend.number}}</td>
</tr>

工作柱塞