행과 항목에 대한 AngularJS 반복 -

Question

Ionic app가 있습니다. 이제 코드 아래에 있습니다.

<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-반복의 키와 값이 필요합니다. 나는 나를 위해 해결책을 찾지 못했다. 제발 도와주세요.

업데이트 : 하나의 행을 사용하는 경우 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과 같습니다. 이 경우 키 이름을 완전히 제어 할 수 있습니다. 두 번째 예와 같이 수행하면 키는 0, 1..이됩니다.

다음 번에 귀하의 질문에 대해 다시 한 번 말씀해주십시오.이를 이해하고 적절한 대답을 받으십시오.