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

【问题标题】：How to go through a list with AngularJs in HTML view?如何在 HTML 视图中使用 AngularJs 浏览列表？
【发布时间】：2016-12-06 13:00:18
【问题描述】：

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

一个包含运动列表的对象用户：

$scope.user = { sports: { "running": true, "football": true } }
一个名为“matches”的列表，其中包含一个用户列表，每个用户都有运动项目。示例：

matches = { userA: {..., sports: {"running": true, "football": true} }, 用户B：{...，运动：{“橄榄球”：真，“足球”：真} }

在前端：

<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 的共同运动（例如，让我们将运动涂成红色）。

你建议我怎么做？

谢谢

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以通过将匹配设置为对象数组（如果可能的话）在 ng-repeat 中更容易管理匹配...

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>

【讨论】：

【解决方案3】：

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

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>

【讨论】：