AngularJS ng-repeat for rows and items

Question

I have Ionic app. Now I have below code.

<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>

But it's broken on Android 4.0.0 and I need repeat rows and 3 items in the row. I need something like this.

<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>

I need key and value in the ng-repeat. I didn't find solution for me. Can you help me please.

Update: If I use one row the items on the Android 4.0.0 doesn't transfer to a new line. I need repeat rows and in the rows I need see 3 different items. I have tried Angular ng-repeat add bootstrap row every 3 or 4 cols this solution, but I have (key, value) and it doesn't suit me.

*"it's broken"* is not a proper problem statement. Also no idea what you mean in last sentence since you already show key and value. Please review [ask] — charlietfl, Jul 20 '16 at 19:26
If I use one row the items on the Android 4.0.0 doesn't transfer to a new line. I need repeat rows and in the rows I need see 3 different items. — Maksym Krugliachenko, Jul 23 '16 at 08:15

score 1 · Answer 1 · answered Jul 20 '16 at 19:27

1

Perhaps use collection-repeat with ion-list?

answered Jul 20 '16 at 19:27

Mickers

1,367
1
20
28

Hello. That's not what I need. I need repeat rows and in the one row see 3 different items. – Maksym Krugliachenko Jul 23 '16 at 08:23

score 0 · Answer 2 · answered Jul 20 '16 at 19:47

This seems valid, but maybe you want to do like something like this:

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">
     
  <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 class="col col-33">
        <h3>Key: {{key}}</h3> 
       <h4>Value: {{value.name}}
     </div>
      
    </div>
  </div>
 </div>

Nikolay Babanov · Answer 3 · 2016-07-20T19:54:31.493

Your question is not clear enough, but I will try to answer it.

First of all you should not use href with an angular template string, because there is a chance the link would point to a non-existing page (before the digest loop completes). Use ng-href instead.

Source: https://docs.angularjs.org/api/ng/directive/ngHref

If I understood your problem right, you cannot access all of your values in the object from ng-repeat, this is because you have probably not structured your JS object properly.

For example (name, age) in {'adam':10, 'amalie':12}, would result in name first being adam and then amaile, the same goes for age.

In order for your (key, value) to work properly, your categoryMenuOut should have a structure similar to:

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

or even better:

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

In my first example your key would be pizza1, the value will be the whole object { name: 'Pepperoni' }, therefore the value.name will be equal to Pepperoni. In this case you have full control over the key's name. If you do it as in the second example, your keys would be 0, 1...

Try to reword your question next time, in order for us to understand it and for you to receive a proper answer.

AngularJS ng-repeat for rows and items

3 Answers3