zeigt Informationen von referenzierten Schemas unter Verwendung von Winkel

Question

Ich habe 2 Schemas wie folgt:

In Artikel, habe ich eine Reihe von Elementen durch Komma (,) getrennt

Das Element Schema jedes Element innerhalb des Elements Feld definiert in Artikel

var Product = new Schema({ 

      name: {type: String}, 
      Elements: {type : String} 
}); 

var Element= new Schema({ 

      title: {type: String}, 
      code : {type : String} 
}); 

HTML-Datei:

<div class="productController as product"> 
    <div ng-repeat="pro in product.product.Elements.split(', ')" ng-init="getCategory(pro)"> 
     <h3>{{pro}} {{data.code}}</h3> 
    </div> 
</div> 

In Product

productid = $routeParams.id; 
var getthatProduct = function(){ 
    productFactory.getthatProduct(productid, function(data){ 
     console.log('[CONTROLLER] That Product:',data); 
     that.product = data; 

    }) 
} 
getthatProduct(); 

$scope.getCategory = function(data){ 

elementFactory.getElements(data, function(data){ 
     console.log('[CONTROLLER] That Element:',data); 
     $scope.data = data; 

    }) 
} 

elementFactory:

factory.getElements= function(data, callback){ 
    $http({ 
     url:'api/seeelements', 
     method:'GET', 
     params:{title: data} 
    }).then(function(response){ 
     //console.log(data); 
     callback(response.data) 
    }) 
} 

GetElements in meiner Fabrik definiert ist, die alle Elemente info holen von Element Schema

ich holen kann {pro} aber ich bin nicht in der Lage um die Elementinfo abzurufen.

Wie wird das Element.title für jedes Element in einem einzelnen Produkt angezeigt?

Answer 1

Meine Empfehlung, verwenden Sie nicht ng-init. Holen Sie sich Elemente, erstellen Sie einen Hash und verwenden Sie ihn dann.

productid = $routeParams.id; 
$scope.elementsHash={}; 
$scope.productElements = []; 
var getthatProduct = function(){ 
    productFactory.getthatProduct(productid, function(data){ 
     console.log('[CONTROLLER] That Product:',data); 
     that.product = data; 
     $scope.productElements = that.product.product.Elements.split(', '); 
     $scope.productElements.forEach(function(elem){ 
      $scope.getCategory(elem); //get each element's info 
     }); 
    }) 
} 
getthatProduct(); 

$scope.getCategory = function(data){ 

elementFactory.getElements(data, function(resp){ 
     console.log('[CONTROLLER] That Element:',resp); 
     $scope.elementsHash[data] = resp; //this will update the hashes e.g {'sometitle':{title:'sometitle',code:123}} 
    }) 
} 

jetzt in Ihrem HTML, dass Hash-

<div class="productController as product"> 
    <div ng-repeat="pro in productElements"> 
     <h3>Element title: {{pro}}</h3> 
     <p>{{elementsHash[pro].code}}</p> <!-- e.g. elementsHash.sometitle.code 
    </div> 
</div> 

this helps