ng angularjs中的重复过滤器数据不起作用

ng-repeat filter data in angularjs not working

本文关键字：过滤器 数据 不起作用 angularjs ng      更新时间：2023-09-26

我有一个数据设置，看起来像这个

$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示例

您可以修改friends数据以满足此要求。我所做的是使用angular.forEach()函数来修改数据，并将其放入一个名为$scope.modifiedFriends的新数组中。

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

代替friends的ng重复，而是modifiedFriends的ng重复。

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

工作Plunker

相关文章：