Angular arbeitet mit zwei „verzahnt“ Liste von JSON-Objekte

Question

sagen, ich habe die folgende JSON-Datei

{ 
    "A": [ 
    {"name": "foo", 
     "BRef": "123" 
    }, 
    {"name": "Hello", 
     "BRef": "456" 
    } 
    ], 

    "B": [ 
    {"ID": "123", 
     "lastName": "bar" 
    }, 
    { 
     "ID": "456", 
     "lastName": "World" 
    } 
    ] 
} 

ich das Modell und die Ansicht über die Steuerung

$http.get('js/data.json') 
    .success(function(data) { 
     $scope.A = data.A; 
     $scope.B = data.B; 

Wie kann ich Schleife verbunden sind durch A und den Nachnamen von B ausgraben?

<div ng-repeat="a in A"> 
<h1>{{a.name}} {{ <<(B.b.ID == a.BRef).lastname>> }}</h1> 
</div> 

Dachte, dass ein ng-repeat von B mit einem Filter könnte den Trick tun .. aber ich bin nicht so geschickt im Umgang mit Winkelfilter (noch)

Answer 1

Sie Funktion für GetLast Namen verwenden oder verschachtelten verwenden ng-repeat und verwenden ng-if-Anweisung für die Anzeige Artikel übereinstimmen.

$scope.getLastName = function(BRef){ 
    var lastName = ""; 
     angular.forEach($scope.data.B,function(b){ 
     if(b.ID == BRef) 
     lastName = b.lastName; 
    }); 
    return lastName; 
} 

Ihrer Ansicht nach Gebrauch

<div ng-repeat="a in A"> 
    <h1>{{a.name}} <span ng-bind="getLastName(a.BRef)"></span></h1> 
</div> 

var editer = angular.module('editer', []); 
 
function myCtrl($scope) { 
 
    $scope.data = { 
 
    "A": [ 
 
    {"name": "foo", 
 
     "BRef": "123" 
 
    }, 
 
    {"name": "Hello", 
 
     "BRef": "456" 
 
    } 
 
    ], 
 

 
    "B": [ 
 
    {"ID": "123", 
 
     "lastName": "bar" 
 
    }, 
 
    { 
 
     "ID": "456", 
 
     "lastName": "World" 
 
    } 
 
    ] 
 
} 
 
    
 
    $scope.getLastName = function(BRef){ 
 
    var lastName = ""; 
 
     angular.forEach($scope.data.B,function(b){ 
 
     if(b.ID == BRef) 
 
     lastName = b.lastName; 
 
    }); 
 
    return lastName; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="editer" ng-controller="myCtrl" class="container"> 
 
    <div ng-repeat="a in data.A"> 
 
    <h1>{{a.name}} <span ng-bind="getLastName(a.BRef)"></span></h1> 
 
    </div> 
 
    
 
    OR 
 
    ---------------------------------- 
 
    
 
    <div ng-repeat="a in data.A"> 
 
    <h1>{{a.name}} <span ng-repeat="b in data.B" ng-if="b.ID == a.BRef">{{b.lastName}}</span></h1> 
 
    </div> 
 
    
 
</div>

Answer 2

Ich rechne damit, SSH richtig ist.

können Sie Filtermethode von Javascript verwenden d.h

$scope.findCorrespondingLastName(bref) { 
    $scope.B.filter(function(b) { 
     return b.ID == bref; 
    }); 
} 

und in der HTML-Datei verwenden

<div ng-repeat="a in A"> 
    <h1>{{a.name}} {{findCorrespondingLastName(a.BRef)[0]['lastName']}}</h1> 
</div> 

auch versuchen controllerAs alias zu verwenden und die Variablen auf this der Steuerung zu setzen. Die Verwendung von $scope wird gemäß den neuesten eckigen Dokumenten nicht empfohlen.

Answer 3

Von einem der Post, die ich gefunden tatsächlich eine elegante Lösung von combinding es mit dem ng-show

<div ng-repeat="a in A"> 
<div ng-repeat="b in B" ng-show="b.ID == a.BRef"> 

<h1>{{a.name}} {{b.lastname}}</h1> 

</div> 
</div>