Question

我想检查一个属性的状态（true或false），在每个对象上确定天气或不显示div。

例如，以下效果很好。显示＆＃34;学生＆＃34;如果students.length > 0标题，则按名称单独问候每个学生。

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

但是，如果我想添加另一个条件怎么办？我只想展示这个课堂信息<div>，如果至少一个学生成绩好。

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

在上面的代码块中，我添加了students[$index].hasGoodGrades === true，但$index仅与ng-repeat结合使用。意思是我需要添加：

ng-repeat="student in ctrl.classroomInfo.students"到我的div标记。这很糟糕，因为它会为每个成绩好的学生重复<h1>Students</h1>标题。

如何在每个学生对象上访问 hasGoodGrades 属性以确定天气与否以显示整个div？

更新

感谢有关过滤器的答案。如何处理过滤属性深度较高的情况？例如：

ctrl.classroomInfo.students.RESULTS.hasGoodGrades

ng-if="(ctrl.classroomInfo.students | filter:{RESULTS.hasGoodGrades:true}).length > 0"无法正常工作

Answer 1

使用过滤器：

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

Answer 2

您可以通过创建返回布尔值的过滤器或返回布尔值的控制器方法来实现此目的。我提倡使用过滤器来保持视图控制器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
        }
    }
])

使用ng-if中的过滤条，如下所示：

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

修改

我会在这里留下答案作为另一个答案的替代方案。我更明确，更具可读性，但我认为我更喜欢@ jstell的答案 - https://stackoverflow.com/a/39129784/1121919

Answer 3

您可以在ng-if或ng-show条件中使用过滤器，如下所示：

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

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

Answer 4

在循环内进行测试：

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

但是会创建每个类的结构......

Angularjs访问对象索引

4 个答案:

修改