如何解析Angular中的嵌套中繼器？

我在Angular中創建了一個商店，我有多個類別，每個類別都有產品。我想將每個類別劃分爲一個單獨的div，然後在單獨的div中列出每個產品。如何解析Angular中的嵌套中繼器？

這是我想要的輸出看起來像：

<div> 
 
    <h2>category1</h2> 
 
    <div>Product 1</div> 
 
    <div>Product 2</div> 
 
</div> 
 

 
<div> 
 
    <h2>category2</h2> 
 
    <div>Product 3</div> 
 
    <div>Product 4</div> 
 
</div>

這是我到目前爲止有：

(function() { 
 
    var app = angular.module('store', [ ]); 
 

 
    app.controller('StoreController', function() { 
 
    this.items = products; 
 
    }); 
 
\t 
 
    var products = [{ 
 
    category1: [{ 
 
     name: "Product 1", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 2", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }], 
 
    category2: [{ 
 
     name: "Product 3", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 4", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }] 
 
    }]; 
 
})();

<!DOCTYPE html> 
 
<html ng-app="store"> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body ng-controller="StoreController as store"> 
 

 
    <div ng-repeat="category in store.items"> 
 
     <h2>{{category}}</h2> <!-- Category title here --> 
 
     <div ng-repeat="item in category">{{item.name}}</div> 
 
    </div> 
 
    
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script> 
 
    <script type="text/javascript" src="app.js"></script> 
 
    </body> 
 

 
</html>

Here's a Plunker

來源

2017-04-07 user13286

您plunker不行！ – Akashii

我知道，這就是我尋求幫助的原因。 – user13286

請參閱[此編輯的重擊]（https://plnkr.co/edit/iS0BGXbhFDH7B6PR0XOm?p=preview）。我想你必須重寫你的json/object來讓它更有意義。你從一個只有一個項目的數組開始，這個數組又是一個對象而不是數組 – devqon

你ng-repeat應該是這樣的：

<div ng-repeat="category in store.items[0]"> 
    <h2>category{{$index+1}}</h2> 
    <div ng-repeat="item in category"> 
     {{item.name}} 
    </div> 
</div>

這裏的工作示例：

(function() { 
 
    var app = angular.module('store', []); 
 

 
    app.controller('StoreController', function() { 
 
    this.items = [{ 
 
    something: [{ 
 
     name: "Product 1", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 2", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }], 
 
    category2: [{ 
 
     name: "Product 3", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }, { 
 
     name: "Product 4", 
 
     description: "Lorem ipsum dalor sit amet" 
 
    }] 
 
    }];; 
 
    }); 
 

 
    
 
})();

<!DOCTYPE html> 
 
<html ng-app="store"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="StoreController as store"> 
 

 
    <div ng-repeat="(key, category) in store.items[0]"> 
 
    <h2>{{key}}</h2> 
 
    <!-- Category title here --> 
 
    <div ng-repeat="item in category"> 
 
     {{item.name}} 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-04-07 14:38:40 tanmay

真棒，謝謝！ – user13286

@ user13286很高興我能幫忙！請標記爲已接受的答案..謝謝:) – tanmay

對於'h2'有沒有什麼方法可以獲取類別的實際名稱，而不是硬編碼單詞「category」，然後在數字上添加標籤？ – user13286

我會建議在一個稍微不同的方式組織你的數據，以便它更容易解析。

的javascript：

(function() { 
    var app = angular.module('store', [ ]); 

    app.controller('StoreController', function() { 
     this.categories = categories; 
    }); 

    var categories= [ 
     { 
     name: "Category 1", 
     products: [{ 
      name: "Product 1", 
      description: "Lorem ipsum dalor sit amet" 
     },{ 
      name: "Product 2", 
      description: "Lorem ipsum dalor sit amet" 
     }], 
    },{ 
     name: "Category 2", 
     products: [{ 
      name: "Product 3", 
      description: "Lorem ipsum dalor sit amet" 
     },{ 
      name: "Product 4", 
      description: "Lorem ipsum dalor sit amet" 
     }], 
    }]; 
})();

HTML：

<!DOCTYPE html> 
<html ng-app="store"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 

    <body ng-controller="StoreController as store"> 

    <div ng-repeat="category in store.categories"> 
     <h2>{{category.name}}</h2> 
     <div ng-repeat="product in category"><h4>product.name</h4></div> 
    </div> 

    </body> 

</html>

https://plnkr.co/edit/Wr83nz47aUJpSQgSaHL3?p=preview

來源

2017-04-07 14:45:19 jspurim

如何解析Angular中的嵌套中繼器？

回答

相關問題