行と項目のAngularJS繰り返し -

Question

私はIonicアプリを持っています。今私は以下のコードを持っています。

<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にはキーと値が必要です。私は私のための解決策を見つけませんでした。 私を助けてくれますか？

更新：私が1つの行を使用すると、Android 4.0.0の項目は新しい行に転送されません。私は繰り返し行が必要と行に私は3つの異なる項目を参照する必要があります。 私はAngular ng-repeat add bootstrap row every 3 or 4 colsこの解決策を試しましたが、私は（キー、値）を持っており、それは私に合っていません。

Answer 1

おそらくcollection-repeatにイオンリストを使用しますか？

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

私はあなたの問題の権利を理解している場合、あなたはおそらく正しくJSオブジェクトを構造化していないので、これは、ng-repeatからオブジェクトに値のすべてにアクセスすることはできません。

たとえば、(name, age) in {'adam':10, 'amalie':12}のように、名前が最初にアダムになってしまい、その後も悲惨なことになります。 、

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

私の最初の例では、あなたの鍵はpizza1次のようになります。

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

またはより良い：あなたの(key, value)を正しく動作させるためには

は、あなたのcategoryMenuOutは同様の構造を持っている必要がありますvalueは全体オブジェクト{ name: 'Pepperoni' }になるため、value.nameはPepperoniに等しくなります。この場合、キーの名前を完全に制御できます。 2番目の例のようにすると、キーは0, 1..になります。

私たちがそれを理解し、適切な答えを得るために、次回にあなたの質問に言い直すようにしてください。