AngularJS: ngIf in array of array with different properties

Question

my object:

objects = [
{
    name: "1",
    foo: [{
      value: 0.5,
      ignored: null,
      text: "foo1"
    }, {
      value: 0,
      ignored: null,
      text: "foo"
    }]
},
{
    name: "2",
    foo: [{
      value: 0,
      ignored: null,
      text: "foo"
    }, {
      value: 0.5,
      ignored: null,
      text: "foo2"
    }]
},
{
    name: "3",
    foo: [{
      value: 0.5,
      ignored: null,
      text: "foo3"
    }]
},
{
    name: "4",
    foo: [{
      value: 0,
      ignored: 1,
      text: "foo4"
    }]
},
{
    name: "5",
    foo: [{
      value: 0,
      ignored: null,
      text: "foo5"
    }]
}]

my AngularJs template html:

<div class="row" ng-repeat="object in objects">
  {{ object.name }}
  <div ng-repeat="foo in object.foo">
    <div ng-if="foo.value > 0 || foo.ignored == 1">
      {{ foo.text }}
    </div>
  </div>
</div>

My result is:

1 foo1
2 foo2
3 foo3
4 foo4
5

but i do not want display object.name for case N°5.

How to use 2nd ng-repeat and ng-if in 1st ng-repeat please?

<div class="row" ng-repeat="object in objects" ng-if="...???...">
  {{ object.name }}
  any text !!
</div>

Your array is not an array of arrays but an array of objects. Could you please clarify what you mean by "with different properties"? Does that mean that the elements in objects can have different structures? — Florian Lim
– Florian Lim, Commented Feb 28, 2019 at 15:43
So why don't you just put ng-if="object.foo.value > 0 || object.foo.ignored == 1" on the main ngRepeat directive? — Alon Eitan
– Alon Eitan, Commented Feb 28, 2019 at 15:48
@sgrillon Oh, I didn't see that edit. Can foo contain more than one object, or would it always contain a single object? — Alon Eitan
– Alon Eitan, Commented Feb 28, 2019 at 15:54

Florian Lim · Accepted Answer · 2019-02-28 16:10:52Z

1

You can use a filter function in ng-if.

Changed template:

<div class="row" ng-repeat="object in objects" ng-if="myFilter(object)">
  {{ object.name }}
  <div ng-repeat="foo in object.foo">
    <div ng-if="foo.value > 0 || foo.ignored == 1">
      {{ foo.text }}
    </div>
  </div>
</div>

Filter function in your controller:

$scope.myFilter = function(o) {
  // Returns a truthy value if the foo-subarray meets the criteria.
  var found = o.foo.find(function(fooElement) {
    return fooElement.value > 0 || fooElement.ignored == 1;
  });
  return found;
};

Result:

1
foo1
2
foo2
3
foo3
4
foo4

answered Feb 28, 2019 at 16:10

Florian Lim

5,3622 gold badges29 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

smdufb · Accepted Answer · 2019-02-28 16:24:33Z

0

You could simply do:

<div class="row" ng-repeat="object in objects">
  <div ng-repeat="foo in object.foo">
    <div ng-if="foo.value > 0 || foo.ignored == 1">
      {{ object.name }}
      {{ foo.text }}
    </div>
  </div>
</div>

If you know in advance that only one element of object.foo can ever pass the ngIf. (Like is the case in your example)

answered Feb 28, 2019 at 16:24

smdufb

5655 silver badges20 bronze badges

1 Comment

Stéphane GRILLON Over a year ago

sorry but in your solution object.name display several times.

Collectives™ on Stack Overflow

AngularJS: ngIf in array of array with different properties

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related