如何在HTML视图中使用AngularJs浏览列表？

Question

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

1. 包含运动列表的对象用户： $scope.user ={体育：{“跑”：真，“足球”：真}
2. 一个名为“匹配”的列表，包含一个用户列表，每个用户都有体育活动。示例： 比赛={ userA：{.，体育：{“跑”：真，“足球”：真}，userB：{.，体育：{“橄榄球”：真，“足球”：真}

在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，并将突出显示应用到公共领域。

还可以使用ng类指令根据表达式突出显示.

Answer 2

您可以通过使其成为一个对象数组(如果可能的话)使匹配在ng-重复中更容易管理.

matches = [{user: {}, sports: {"running": true, "football": true} }, {user: {}, sports: {"rugby": true, "football": true}]

然后根据您的uid向当前用户添加一个类.

  <ion-item class="item-thumbnail-left" ng-repeat="match in matches track by match.user.uid"
   ng-class="{'some-class-to-add-highlight': match.user.uid == 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>

Answer 3

这些事情必须在Controller中完成。角度视图不是制造业务逻辑的地方。

​

function UserCtrl($scope, user, users) {
  $scope.user = user;
  $scope.users = users;
  
  
  $scope.commonSports = Object
    .keys(users)
    .reduce(function(res, username, index) {
      var sports = users[username].sports;
      var common = {};
    
      for(var sport in sports) {
        if(!sports.hasOwnProperty(sport)) { 
          continue;
        }
        
        
        common[sport] = !!(sports[sport] &&
          user.sports[sport])
        ;
      }
    
      res[username] = common;
      return res;
    }, {})
  ;
  
}

angular
  .module('test', [])
  .value('user', { 
    sports: { "running": true, "football": true } 
  })
  .value('users', { 
    userA: {
      sports: {"running": true, "football": true} 
    }, 
    userB: {
      sports: {"rugby": true, "football": true} 
    }
  })
  .controller("UserCtrl", UserCtrl)
;

.highlight {
  background: yellow;
}

li span {
  display: inline-block;
  margin: 5px;
  padding: 2px 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<section ng-app="test">
  <article ng-controller="UserCtrl">
  
  <div>
    <h3>You</h3>
    <ul>
      <li ng-repeat="(sport, v) in user.sports">
        <span ng-bind="sport"></span>
      </li>
    </ul>
  </div>
    
  <div>
    <h3>They</h3>
    <ul>
      <li ng-repeat="(user, sports) in commonSports">
        <strong ng-bind="user"></strong>:
        <span 
              ng-repeat="(sport, isCommon) in sports"
              ng-bind="sport"
              ng-class="{highlight: isCommon}">
        </span>
        
      </li>
    </ul>
  </div>
    
    <hr /> 
<pre><code>
{{ commonSports | json }}
</code></pre>
    
  </article>
</section>

​