使用 AngularJS 过滤器过滤数据。如何遍历对象？

Question

这是我的过滤器：

app.filter('ticketsFilter', function (){
return function (input){
    var data = input;
    console.log("Filtered object:")
    console.log(data);
        return input;
};
});

这是我的标记：

<tr ng-repeat="ticket in tickets | ticketsFilter">
  <p> {{ticket.createdByName}} </p>
  <p> {{ticket.title}} </p>
  <p> {{ticket.toDpt}} </p>
</tr>

门票对象是对象的对象。在我的数据库中，有 4 个票证实例。而且，当我的票命中过滤器时，过滤对象显示为：

[Object, Object, Object, Object]

我不知道如何访问这些对象。我试过使用 $index，收到了依赖注入。尝试使用（输入中的 x）循环，但 console.log 将仅显示最后一个对象属性。我试过（我，我

我可以使用这个正确访问我的对象属性：

console.log(data[0].attribute);

但我不知道如何迭代和访问 data[i] 而不是 data[0]。那么，关于如何访问我的对象对象索引的任何提示？如果需要，我可以提供更多代码。

感谢任何建议。

@EDIT

这是我的 console.log($scope.tickets) 的样子：

fromDpt: Array[4]
0: Object
1: Object
2: Object
3: Object

每个对象看起来像这样：

0: Object
__v: 0
_id: "55ddb1e6ca11301020ef9b77"
createdAt: "1440592358061"
createdById: "55d758ee3a7ff720141a18f8"
__proto__: Object

Answer 1

使用 Ng 模型并将模型作为过滤器传递... 这里有一个例子：http://jsfiddle.net/leojavier/njm96Luv/2/

<div class="field" ng-app="App">
    <input type="text" ng-model="model">
    <table ng-controller="Controller">
        <tr ng-repeat="item in table | filter:model">
            <td ng-class="item.style"><i ng-class="item.badge"></i> {{item.name}}</td>
        </tr>
    </table>
</div>

js

var App = angular.module('App', []);
App.controller('Controller', function($scope, $timeout){
    $scope.table = [
        {name : 'Dan', 
         badge: 'fa fa-futbol-o'
        },
        {name : 'Orlando', 
         badge: 'fa fa-bicycle'},
        {name : 'Dany', 
         badge: 'fa fa-bolt'}
   ];

    $scope.delete = function(item, index){
        item.deleted = true;
        item.style = 'deleted';

        function destroy() {
        $scope.table.splice(index, 1)
        }

        $timeout(function(){destroy();}, 3000);
    }
})

示例：http://jsfiddle.net/leojavier/njm96Luv/2/

Answer 2

下方 div 将根据我的文本框输入显示票证

 <input type="text" ng-model="tickets.Id">
<div ng-repeat="ticket in tickets | filter:tickets">

Answer 3

下面的代码将对工单中的所有对象应用过滤器并返回完整的对象数组：

<tr ng-repeat="ticket in tickets | filter:ticketsFilter">

如果您想使用过滤器来改变特定项目的输出，您可以在 ng-repeat 下一级应用过滤器：

<tr ng-repeat="ticket in tickets">
   {{ticket.name | filter:ticketsFilter}}
</tr>

但这取决于您希望过滤器执行的操作。我建议你也看看一些信息如何应用过滤器：https://docs.angularjs.org/api/ng/filter/filter

如果这对您不起作用，我建议您更具体地说明您希望过滤器执行的操作。

Answer 4

我想你想做的是嵌套 ng-repeats。如果我错了请纠正我，但如果我是对的你可以这样做：

<div ng-repeat="ticket in tickets">
<div ng-repeat="myOtherObject in   ticket.someProperty | filter:something">
</div>
</div>

很抱歉在移动设备上的草率代码，但您应该明白了。

Answer 5

你们所有人都让我对这个问题有了深刻的认识。我感谢你们每一个人。由于 none 有一个完整的答案，我将总结所有的提示并为这个问题创建一个完整的答案：

首先。当我尝试遍历

<tr ng-repeat="ticket in tickets | ticketsFilter">

ticketsFilter 将接收一个 ticketS 实例。 TicketS 是一个对象，包含多个票证对象，每个票证都有一些属性。所以：

$scope.tickets = {
  ticket: { name: 'Philip', status: 'good' },
  ticket: { name: 'R2B21', status: 'sad' },
  ticket: { name: '42', status: 'good' },
  ticket: { name: 'MVW', status: 'bad' }
};

知道我的过滤器将接收票作为输入，我可以使用适当的 for 循环访问其中的每张票。这样：

app.filter('ticketsFilter', function () { 
  return function(tickets){
    for (var i = 0; i < tickets.length; i ++) { ...

在 for 循环内，我将获取票证中包含的每张票证。所以，我只需要抓住它们并检查它们是否具有我想要的属性。在这种情况下，我只想 return 状态为 'good' 的工单。所以：

var ticket = tickets[i]; //Grabing the ticket inside the for loop.
if (ticket.status == 'good') { //Checking if my ticket is good.

现在，我需要两件事。首先，我需要 return 我的数据，我需要将每张过滤后的 'good' 票据推送到我的 return 数据中。我需要记住，tought，returned 对象不能是 1 ticket，而是 ticketS。因此，我将在 for 循环之前创建一个名为 filtered 的空数组。并且，要推送使用我的 if 插入具有 status=='good'.

属性的 ticket[i]

所以，完整的代码将是：

app.filter('ticketsFilter', function (){
return function (tickets){
    //creating the empty object that will return data
    var data = []; 
    for (var i = 0; i < tickets.length; i ++) {
        var ticket = tickets[i];
        if (ticket.status == 'good'){
            //Inserting 'good' ticket inside of data
            data.push(ticket);
        };
    };
    //And, finally, returning the data
    return data;
};
});

在那之后，如果我有标记：

<tr ng-repeat="ticket in tickets | ticketsFilter">
  <p><b> {{ticket.name}} </b></p>
</tr>

它会显示：

菲利普

42

就是这样，遍历对象数组并检查它们的属性。我要再次感谢每一位试图提供帮助的人，并对我的错误解释感到抱歉。

谢谢！

使用 AngularJS 过滤器过滤数据。如何遍历对象？

Filtering data with AngularJS Filter. How to iterate over objects?

javascript

angularjs

angularjs-filter

下方 div 将根据我的文本框输入显示票证