如何在HTML視圖中瀏覽AngularJs的列表？

Question

在Ionic框架中使用AngularJS。 在前端側的$範圍包含

1. 包含運動的一個列表的對象用戶：

   $ scope.user = {體育：{「運行」：真，「足球」 ：true}}

2. 一個名爲「matches」的列表，包含用戶列表並且每個用戶都有體育項目。例如：

   matches = {userA：{...，sports：{「running」：true，「football」：true}}， userB：{...，sports：{「rugby」：true， 「足球」：真正}}

在Ÿ前端：

<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-class指令根據表達式進行高亮顯示。

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>