javascript - 如何在 HTML View 中使用 AngularJs 浏览列表？

Question

在 Ionic 框架中使用 AngularJS。在前端，$scope 包含

1. 包含运动列表的 User 对象:

   $scope.user = { sports: { "running": true, "football": true } }

2. 名为“matches”的列表，其中包含用户列表，每个用户都有运动项目。示例:

   matches = { userA: {..., sports: {"running": true, "football": true} }, userB: {..., sports: {"rugby": true, "football": true} }

在y前端:

<ion-item class="item-thumbnail-left" ng-repeat="match in matches track by match.user.uid">
  <img>
  <span>{{match.user.firstname}} {{match.user.lastname}}</span>
  <h3>{{match.user.position}} - {{match.user.lob}}</h3>
  <h3>@{{match.company}}</h3>
  <h4>{{match.score}} sport(s): </h4>
  <h4 ng-repeat="sport in match.user.sports track by sport.id" style="float: left;">
    {{sport.name}}
  </h4>
</ion-item>

我想突出显示 $scope.user 与每个 $scope.matches.user 共有的运动(例如，将运动着色为红色)。

您建议我如何执行此操作？

谢谢

Answer 1

一旦您要操作 DOM，创建一个指令看起来是正确的选择。您可以创建一个接收 $scope.user 和 $scope.matches.user 的指令，并将突出显示应用于公共(public)区域。

您还可以使用 ng-class 指令根据表达式突出显示。