AngularJS ng-重複行和項目

Question

我有離子應用程序。現在我有下面的代碼。

<div class="row"> 
    <div class="col col-33" ng-repeat="(key, value) in categoryMenuOut"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
</div> 

但它在Android 4.0.0上壞了，我需要在行中重複行和3項。我需要這樣的東西。

<div class="row" ng-repeat="(key, value) in categoryMenuOut"> 
    <div class="col col-33"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
    <div class="col col-33"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
    <div class="col col-33"> 
    <a href="#/category/{{chosenCat}}/{{key}}"> 
     `some code` 
     <span class="name">{{value.name}}</span> 
    </a> 
    </div> 
</div> 

我需要ng-repeat中的鍵和值。我沒有找到解決方案。 你能幫我嗎。

更新：如果我使用一行Android 4.0.0中的項目不會傳輸到新行。我需要重複行，並在我需要的行中看到3個不同的項目。 我試過Angular ng-repeat add bootstrap row every 3 or 4 cols這個解決方案，但是我有（key，value），它不適合我。

Answer 1

也許使用collection-repeat與ion-list？

Answer 2

這似乎是有效的，但也許你想去做這樣的事情：

angular.module('myApp',[]) 
 
.controller('myCtrl',['$scope',function($scope){ 
 
    $scope.categoryMenuOut = {"Ben": {"name": "bill"}, "Nate": {"name": "joll"}, "Austin": {"name": "boll"}}; 
 

 
}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<div ng-app='myApp'> 
 
    <div ng-controller='myCtrl'> 
 
    <div class="row" ng-repeat="(key, value) in categoryMenuOut track by $index"> 
 
     
 
\t <div class="col col-33"> 
 
     <h3>Key: {{key}}</h3> 
 
     <h4>Value: {{value.name}} 
 
    </div> 
 

 
     \t <div class="col col-33"> 
 
     <h3>Key: {{key}}</h3> 
 
     <h4>Value: {{value.name}} 
 
    </div> 
 
    
 
    <div class="col col-33"> 
 
     <h3>Key: {{key}}</h3> 
 
     <h4>Value: {{value.name}} 
 
    </div> 
 
     
 
    </div> 
 
    </div> 
 
</div>

Answer 3

你提的問題不夠清楚，但我會盡量回答。

首先，您不應該使用帶角度模板字符串的href，因爲鏈接可能指向不存在的頁面（在摘要循環完成之前）。改爲使用ng-href。

來源：https://docs.angularjs.org/api/ng/directive/ngHref

如果我明白你的問題所在，你不能訪問自己的所有值的對象從ng-repeat，這是因爲你有可能不規整的JS對象正確。

例如(name, age) in {'adam':10, 'amalie':12}，會導致姓名首先是亞當，然後是非常重要的，這同樣適用於年齡。

爲了使您的(key, value)正常工作，您categoryMenuOut應該有類似的結構：

$scope.categoryMenuOut = { 
    pizza1: { 
     name: 'Pepperoni' 
    } 
} 

甚至更​​好：

$scope.categoryMenuOut = [ 
    { 
     name: 'Pepperoni' 
    }, 
    { 
     name: 'Salad' 
    } 
] 

在我的第一個例子你的關鍵是pizza1， value將是整個對象{ name: 'Pepperoni' }，因此value.name將等於Pepperoni。在這種情況下，您可以完全控制密鑰的名稱。如果你像第二個例子那樣做，你的密鑰將是0, 1..。

試着在下次重寫你的問題，以便我們理解它並讓你接受正確的答案。