ng-show on an array containing objects

Question

I'm having some trouble figuring out how to use an ng-if directive withing a specific property on an array of objects.

Array:

[{"Id":1087,
"CreateDate":"2015-11-02T19:26:39.007",
"Message":"Some text in here...",
"AffectedDate":null,
"Type":"a",
"CreatePeriod":"Today",
"CreateDateString":"Monday, November 2, 2015 7:26 PM"},
 {"Id":1086,
"CreateDate":"2015-11-02T19:26:25.2",
"Message":"Some text in here...",
"AffectedDate":null,
"Type":"a",
"CreatePeriod":"Yesterday",
"CreateDateString":"Monday, November 2, 2015 7:26 PM"},
 {"Id":1085,
"CreateDate":"2015-11-02T19:26:13.677",
"Message":"Some text in here...",
"AffectedDate":"2015-10-30T07:00:00",
"Type":"a",
"CreatePeriod":"Older",
"CreateDateString":"Monday, November 2, 2015 7:26 PM"}]

Above is the array of objects coming down and I'd like to use an ng-show directive on the following heading.

<h3 ng-show="">Last Week</h3>

The property I want to use with ng-show is CreatePeriod

Using the above HTML, since there is no object with CreatePeriod having "Last Week" I want to hide that heading.

Can this be achieved with a simple ng-show? Or do I need to use an ng-repeat in conjunction with the ng-show?

Thanks!

So, you would like that heading to be present if at least one element of the array has "CreatePeriod":"Last Week", is that right? — JB Nizet
– JB Nizet, Commented Nov 2, 2015 at 22:57
Thanks Matt, didn't see that post when searching. It leads me to believe that an ng-repeat is necessary, but is that true? — Flignats
– Flignats, Commented Nov 2, 2015 at 23:06

Bartosz Czerwonka · Accepted Answer · 2015-11-02 23:20:52Z

1

You can create method in controller to check your condition:

$scope.data = [{
    "Id": 1087,
    "CreateDate": "2015-11-02T19:26:39.007",
    "Message": "Some text in here...",
    "AffectedDate": null,
    "Type": "a",
    "CreatePeriod": "Today",
    "CreateDateString": "Monday, November 2, 2015 7:26 PM"
}, {
    "Id": 1086,
    "CreateDate": "2015-11-02T19:26:25.2",
    "Message": "Some text in here...",
    "AffectedDate": null,
    "Type": "a",
    "CreatePeriod": "Yesterday",
    "CreateDateString": "Monday, November 2, 2015 7:26 PM"
}, {
    "Id": 1085,
    "CreateDate": "2015-11-02T19:26:13.677",
    "Message": "Some text in here...",
    "AffectedDate": "2015-10-30T07:00:00",
    "Type": "a",
    "CreatePeriod": "Older",
    "CreateDateString": "Monday, November 2, 2015 7:26 PM"
}];

$scope.checkCreatePeriod = function(value) {

    var result = false;
    angular.forEach($scope.data, function(obj) {

        if (obj['CreatePeriod'] === value && result === false) {
            result = true;
        }

    });

    return result;
}

In View:

<h3 ng-show="checkCreatePeriod('LastWeek')">Last Week</h3>

answered Nov 2, 2015 at 23:20

Bartosz Czerwonka

1,6511 gold badge11 silver badges11 bronze badges

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

1 Comment

Flignats Over a year ago

Thanks for the recommendation. I'm guessing using an ng-repeat or controller logic would be the only way. I chose this method because it seems more appropriate to filter it through the controller.

Collectives™ on Stack Overflow

ng-show on an array containing objects

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related