Angularjs accessing object index

Question

I want to check the state of a property (true or false), on each object to determine weather or not to display a div.

For example, the following works great. Show "Student" heading if students.length > 0, then greet each student by name individually.

<div ng-if="ctrl.classroomInfo.students.length > 0">
  <h1>Students</h1>
  <ul>
    <li ng-repeat="student in ctrl.classroomInfo.students">
      Welcome, {{student}}!
    </li>
  </ul>
</div>

But what if I wanted to add another condition? I only want to show this classroomInfo <div> if atleast one student has good grades.

 <div ng-if="ctrl.classroomInfo.students.length > 0 &&
   ctrl.classroomInfo.students[$index].hasGoodGrades === true">
      <h1>Students</h1>
      <ul>
        <li ng-repeat="student in ctrl.classroomInfo.students">
          Welcome, {{student}}!
        </li>
      </ul>
    </div>

In the above code block I have added students[$index].hasGoodGrades === true, but $index only works in combination with ng-repeat. Meaning I would need to add:

ng-repeat="student in ctrl.classroomInfo.students" to my div tag. This is bad because it will repeat the <h1>Students</h1> header for each student with good grades.

How can I access the hasGoodGrades property on each student object to determine weather or not to show this entire div?

UPDATE:

Thanks for the answers regarding filters. How do I handle a case where the filtered property is another level deep? For example:

ctrl.classroomInfo.students.RESULTS.hasGoodGrades

ng-if="(ctrl.classroomInfo.students | filter:{RESULTS.hasGoodGrades:true}).length > 0" doesn't work

You'd do it within the li for each student. It doesn't make any sense to put it where you've put it, as that's outside the loop. — T.J. Crowder
– T.J. Crowder, Commented Aug 24, 2016 at 17:38
to answer the question about the nested filter property try this filter:{ RESULTS: { hasGoodGrades:true }} src - stackoverflow.com/a/32994920/1121919 — jusopi
– jusopi, Commented Aug 24, 2016 at 20:49

jstell · Accepted Answer · 2016-08-24 17:40:29Z

2

Use a filter:

<div ng-if="(ctrl.classroomInfo.students | filter:{hasGoodGrades:true}).length > 0">

answered Aug 24, 2016 at 17:40

jstell

7067 silver badges12 bronze badges

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

2 Comments

bruh Over a year ago

How does this work when the property is chained another level deep? For example ctrl.classroomInfo.students.results.hasGoodGrades would the filter be written as | filter:{results.hasGoodGrades:true} or is that wrong? Asking because that didn't work for me

jstell Over a year ago

@bruh I think in case of nested properties you need to provide a function (instead of an object) as your filter expression. See docs.angularjs.org/api/ng/filter/filter for argument details.

Community · Accepted Answer · 2017-05-23 11:51:37Z

You can achieve this either by creating a filter that returns a boolean OR a controller method that returns a boolean. I advocate using a filter to keep your view controllers DRY.

.filter( 'hasGoodGrades', [
    function(){
        return function( students ){
            if( students && students.length )
            {
                 var i = 0, m = students.length, student
                 for( i; i < m; i++ )
                 {
                      student = students[ i ]
                      if( student.hasGoodGrades )
                           return true
                 }
            }

            return false
        }
    }
])

Use the filter in your ng-if like this:

 <div ng-if="ctrl.classroomInfo.students | hasGoodGrades">

EDIT

I'll leave the answer here as an alternative to the other answer. Mine is a little more explicit and more readable, but I think I prefer @jstell's answer better - https://stackoverflow.com/a/39129784/1121919

Thanks for this. I will need to refactor to a solution like this, once I get it working with one of the other inline responses.

Ernesto Mayoral Cabezas · Accepted Answer · 2016-08-24 17:41:10Z

0

You can use a filter in your ng-if or ng-show condition, like this:

    <div ng-show="(ctrl.classroomInfo.students | filter:filter(condition)).length">

      <div ng-repeat="student in ctrl.classroomInfo.students">
        {{student.name}}
      </div>
    </div>

answered Aug 24, 2016 at 17:41

Ernesto Mayoral Cabezas

7375 silver badges7 bronze badges

Comments

DIEGO CARRASCAL · Accepted Answer · 2016-08-24 17:48:31Z

0

To do the test inside the loop:

<div ng-if="ctrl.classroomInfo.students.length > 0">
   <h1>Students</h1>
      <ul>
        <li ng-repeat="student in ctrl.classroomInfo.students">
          <span ng-if="student.hasGoodGrades === true">Welcome, {{student}}!</span>
       </li>
     </ul>
</div>

but the structure for each class will be created...

answered Aug 24, 2016 at 17:48

DIEGO CARRASCAL

2,12916 silver badges16 bronze badges

2 Comments

bruh Over a year ago

This will still show the classroomInfo div if no students have good grades.

DIEGO CARRASCAL Over a year ago

"but the structure for each class will be created..." so yes.

Collectives™ on Stack Overflow

Angularjs accessing object index

4 Answers 4

2 Comments

EDIT

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

EDIT

1 Comment

Comments

2 Comments

Linked

Related