AngularJsのリストをHTMLビューで表示する方法は？

Question

イオンフレームワークでAngularJSを使用する。フロントエンド側 $スコープは

1. スポーツのリストを含むオブジェクトユーザー含ま：

   $ scope.user = {スポーツ：{「実行」：真、「サッカー」を：true}}

2. リストは、ユーザーのリストを含む「一致」という名前のリストであり、各ユーザーにはスポーツがあります。例：

   matches = {userA：{...、sports：{"running"： "football"：true}} userB：{...、sports：{"rugby"：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を受け取り、そのハイライトをコモンズに適用することができます。

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>