Wie durchläuft man eine Liste mit AngularJs in der HTML-Ansicht?

Question

Verwendung von AngularJS im ionischen Gerüst. Auf der Front-End-Seite des $ Umfang enthält

1. ein Objekt Benutzer, die eine Liste von Sport enthält:

   $ scope.user = {Sport: { "läuft": true, "Fußball" : true}}

2. eine Liste namens "Übereinstimmungen", die eine Liste von Benutzern enthält und jeder Benutzer hat Sport. Beispiel:

   Übereinstimmungen = {userA: {..., sport: {"running": true, "football": true}}, userB: {..., sport: {"rugby": true, "Fußball": true}}

in y-Front-End:

<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> 

ich mag den Sport betonen, dass $ scope.user mit jedem $ scope.matches.user gemeinsam hat (sagen wir zum Beispiel die Sportfarbe in rot).

Wie würden Sie vorschlagen, dass ich das tue?

Dank

Answer 1

Sobald Sie DOM manipulieren werden, eine Richtlinie schaffen sieht aus wie die hier richtige Wahl. Sie können eine Direktive erstellen, die $ scope.user und $ scope.matches.user empfängt und die Hervorhebung auf die Commons anwendet.

Sie können auch die ng-class-Direktive verwenden, um basierend auf einem Ausdruck zu markieren.

Answer 2

Sie machen könnte passt ein wenig leichter in ng-Wiederholung zu verwalten, indem sie eine Reihe von Objekten (wenn möglich) zu machen ...

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

Dann eine Klasse hinzufügen, basierend auf dem uid zu der aktueller Benutzer ...

<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

Diese Dinge müssen im Controller erledigt werden. Winkelansichten sind nicht der Ort, wo Geschäftslogik machen.

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>