1

what i am trying to achieve: what i want to achieve is that to add an new row of ul after every 2 elements in my ng-repeat loop

for example

                 <ul class="col-sm-2">
                            <li><p>Automobile & Motorcycle</p></li>
                            <li><a href="#">Diagnostic Tools</a></li>


                  </ul>  
                   <ul class="col-sm-2">
                            <li><p>Automobile & Motorcycle</p></li>
                            <li><a href="#">Diagnostic Tools</a></li>


                   </ul>

no how can i do this in ng-repeat?

is there any possiblity using ng-repeat-start/end

i havent been able to try any thing in angular view as i am not able to make any logic sorry for that, but i can get this done with java script by

for (index=0,i=0,j=$scope.items.length; i<j; i+=chunk,index++) {
    temparray [index]= $scope.items.slice(i,i+chunk);
   }
   $scope.items =temparray;

or 

$scope.groupByTwo = function (array)
    {
    var newarray =[];
    index=0;
    for(a=0;a<array.length;a++){
       if(a==0 || a%2==0){
          newarray[index]=[];
          newarray[index].push(array[a]);
      }else{
         newarray[index].push(array[a]);
      }
    if(a!=0)
    index++;

    }
  return newarray;
}
  $scope.items=$scope.groupByTwo($scope.items);

Question is their any angular way of doing this cleanly?

Colin Brock
  • 21,267
  • 9
  • 46
  • 61
A.B
  • 20,110
  • 3
  • 37
  • 71

3 Answers3

1
<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="one">
     <div ng-repeat="b in getLength()  track by $index">
        <ul ng-repeat="a in getArray($index)">
            <li><p>{{a}}</p></li>
        </ul>
     </div>
     <script>
       var app=angular.module("app",[]);
       app.controller("one",function($scope){
        $scope.data=['one','two','three','four'];
         $scope.getLength=function(){
           console.log($scope.data.length/2);
           return new Array($scope.data.length/2);
         };
         $scope.getArray=function(index){
           var temparray;
           console.log(index);
              temparray= $scope.data.slice(index*2,index*2+2);
              console.log(temparray)
          return temparray;
         }
       })
     </script>
  </body>

Plunker link :- "http://plnkr.co/edit/s3ZMCnWdjG2VI6HNdlVp?p=preview"

squiroid
  • 13,809
  • 6
  • 47
  • 67
  • thanks for answer @squirod but is it possible with views only i have written js also i want to do it in views – A.B Jan 10 '15 at 06:54
  • You need two values at a time to display in
      but it is not possible with the ng-repeat as far as i know sorry...       – squiroid Jan 10 '15 at 08:14
    • "http://plnkr.co/edit/joOHkFLLiYQhfIhzuVJM?p=preview" Almost in view except convert the number into array. – squiroid Jan 10 '15 at 08:33
    1

    I can't add comments yet, so I'm making a suggestion based on @squiroid answer. His suggestion is pretty close, but not quite complete. In his example, the <div/> is behaving the way you want the <ul/> to behave, but the <ul/> is still repeating for each item. I also included the distinction between the even and odd <li/>s by making the odds a link.

    Plunker link: http://plnkr.co/edit/s72vWHPJ1CIOzrmlPfHg?p=preview

    <!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-app="app" ng-controller="myController">
  <ul ng-repeat="group in getGroups() track by $index">
    <li ng-repeat="data in getDataByGroup($index)">
        <p ng-if='$even'>{{data}}</p>
        <p><a href='#' ng-if='$odd'>{{data}}</a></p>
    </li>
  </ul>
  <script>
    var app = angular.module("app", []);
    app.controller("myController", function($scope) {
      $scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

      $scope.getGroups = function() {
        return new Array($scope.data.length / 2);
      };

      $scope.getDataByGroup = function(index) {
        return $scope.data.slice(index * 2, index * 2 + 2);
      }
    })
  </script>
</body>
    bbennett
    • 379
    • 1
    • 7
    • thanks for answer @bbennett but is it possible with views only i have written js also i want to do it in views – A.B Jan 10 '15 at 06:54
    • I don't believe there is. 1. `ng-repeat` must be placed on an element causing that element to be rendered n times unless you use `ng-show` or `ng-if`. 2. using `ng-show` or `ng-if` will prevent child elements from rendering also. Both put you in a bind for what you want. Also, since your data is a flat array with no other properties to group on, you need to make the pseudo group like above to generate your `
        `s properly. A cleaner solution would be to wrap the js into a filter like so: [http://stackoverflow.com/a/21653981/3413194](http://stackoverflow.com/a/21653981/3413194)         – bbennett Jan 10 '15 at 08:19
      • plus one for your answer, but i hope i can make it work someway, yeah i think this isnt possible with view – A.B Jan 10 '15 at 08:55
      • Thanks and good luck. I think creating a chunk filter (like the link illustrates) with whatever JavaScript logic you want to use is the best approach I've seen. Plus its a handy piece of code to prevent other developers from having to duplicate the same logic. – bbennett Jan 10 '15 at 09:00
      0

      You could use ng-show and the $index of your repeated elements. Check if the index is even by using the condition ($index % 2 == 0):

      <ul class="col-sm-2" ng-show="$index%2==0"></ul>

      Hope that helps.

      benjipelletier
      • 653
      • 5
      • 11
      • 29