使用AngularJS Filter过滤数据。如何迭代对象?

时间:2015-08-28 14:34:47

标签: javascript angularjs angularjs-filter

这是我的过滤器:

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); 

但我不知道如何迭代和访问数据[i]而不是数据[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

5 个答案:

答案 0 :(得分: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

如果这对您不起作用,我建议您更具体地说明您希望过滤器做什么。

答案 1 :(得分:0)

使用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);
    }
})

exaple:http://jsfiddle.net/leojavier/njm96Luv/2/

答案 2 :(得分:0)

div下面的

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

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

答案 3 :(得分:0)

我认为你要做的是嵌套ng-repeats。如果我错了,请纠正我,但如果我是对的,你可以这样做:

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

对于手机上的草率代码感到抱歉,但你应该明白这一点。

答案 4 :(得分:0)

你们所有人都对这个问题给了我很深刻的见解。我感谢你们每一个人。由于没有一个完整的答案,我将总结所有的提示,并为这个问题创建一个完整的答案:

首先。当我试图迭代

<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' }
};

知道我的过滤器会收到票据作为输入,我可以通过适当的循环来到达其中的每张票。这样:

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

在for循环中,我将到达门票中包含的每张票。所以,我只需要抓住它们并检查它们是否具有我想要的特性。在这种情况下,我想只返回状态为“好”的门票。所以:

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

现在,我需要两件事。首先,我需要返回我的数据,我需要将每个已过滤的“好”票据推送到我返回的数据中。我需要记住,但是,返回的对象不能是1张票,而是ticketS。因此,我将在for循环之前创建一个名为filtered的空数组。并且,推动使用我的if以插入具有状态=='良好'属性的票[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

就是这样,迭代一个对象数组并检查它们的属性。我想再次感谢每一个试图提供帮助并希望对我的不良解释感到抱歉的人。

谢谢!