Repeating some list items and distribute each subsets of that list items into another repeating div elements

Question

I have some html codes with bootstrap as shown below

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <ul>
                        <li> <a href="#"> Electric hoospital bed </a> </li>
                        <li> <a href="#"> Semi electric hospital bed </a> </li>
                        <li> <a href="#"> Manual hospital bed </a> </li>
                        <li> <a href="#"> Home care hospital bed </a> </li>
                    </ul>
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4 col-xs-12">
                    <ul>
                        <li> <a href="#"> Orthopedics bed </a> </li>
                        <li> <a href="#"> Children's bed </a> </li>
                        <li> <a href="#"> Patient trolley </a> </li>
                        <li> <a href="#"> Stretcher </a> </li>
                    </ul>
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4 col-xs-12">
                    <ul>
                        <li> <a href="#"> Nursing trolley </a> </li>
                        <li> <a href="#"> Cambered trolley </a> </li>
                        <li> <a href="#"> Obstetric table </a> </li>
                        <li> <a href="#"> Wheel chair </a> </li>
                    </ul>
                </div>
                <div class="col-lg-3  col-md-3 col-sm-4 col-xs-12">
                    <ul>
                        <li> <a href="#"> Commode wheel chair </a> </li>
                        <li> <a href="#"> Walker </a> </li>
                        <li> <a href="#"> MRC </a> </li>
                        <li> <a href="#"> Foo </a> </li>
                    </ul>
                </div>

I have an array of names of these hospital beds. How can I write this repeating HTML codes into two line code by using AngularJS?

you should read angular documentation for ng-repeat i see that clearly that you didnot go through — Prasad, Feb 26 '16 at 04:41

xSaber · Accepted Answer · 2016-02-26T04:55:51.667

1

Like this:

<div class="col-lg-3  col-md-3 col-sm-4 col-xs-12" ng-repeat="product in products">
    <ul>
        <li ng-repeat="description in product.descriptions"> 
            <a href="#">{{ description }}</a> 
        </li>
    </ul>
</div>

edited Feb 26 '16 at 04:55

answered Feb 26 '16 at 04:34

xSaber

384
1
11

I can't change the structure of array. Please provide some another method. – Muneeb Pullani Feb 26 '16 at 04:38
What is your Current Json Structure ? Update it in your Post – Prasad Feb 26 '16 at 04:39
products = [{name: ' ', code: ' ', features: ["1", "2", "3"], descriptions: ["1", "2", "3"], dimensions: ["1", "2", "3"]}, {name: ' ', code: ' ', features: ["1", "2", "3"], descriptions: ["1", "2", "3"], dimensions: ["1", "2", "3"]}, {name: ' ', code: ' ', features: ["1", "2", "3"], descriptions: ["1", "2", "3"], dimensions: ["1", "2", "3"]}, ...] – Muneeb Pullani Feb 26 '16 at 04:43
@xSaber Hey Can you Update your code with the Following json structure .. you will be appreciated by reputation from My side . i can create a plunker and answer but you will get some reputation .. can you do it ? – Prasad Feb 26 '16 at 04:50

score 0 · Answer 2 · edited May 23 '17 at 11:48

You need split array first and then repeat it, check this.

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

  $scope.hospitalBeds = ["hospital bed0",
    "hospital bed1",
    "hospital bed2",
    "hospital bed3",
    "hospital bed4",
    "hospital bed5",
    "hospital bed6",
    "hospital bed7",
    "hospital bed8",
    "hospital bed9",
    "hospital bed10",
    "hospital bed11",
    "hospital bed12"
  ];




  $scope.chunkify = function(a, n, balanced) {

    if (n < 2)
      return [a];

    var len = a.length,
      out = [],
      i = 0,
      size;

    if (len % n === 0) {
      size = Math.floor(len / n);
      while (i < len) {
        out.push(a.slice(i, i += size));
      }
    } else if (balanced) {
      while (i < len) {
        size = Math.ceil((len - i) / n--);
        out.push(a.slice(i, i += size));
      }
    } else {

      n--;
      size = Math.floor(len / n);
      if (len % size === 0)
        size--;
      while (i < size * n) {
        out.push(a.slice(i, i += size));
      }
      out.push(a.slice(size * n))

    }

    return out;
  }

  $scope.HospitalBaedsGroup = $scope.chunkify($scope.hospitalBeds, $scope.hospitalBeds.length / 4, true);


});

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div ng-app="myApp">

  <div ng-controller="MainCtrl">

    <div class="col-lg-3  col-md-3 col-sm-4 col-xs-12" ng-repeat="bedgroups in HospitalBaedsGroup ">
      <ul>
        <li ng-repeat="bed in bedgroups">
          <a href="#">{{bed}} </a>
        </li>
      </ul>
    </div>
  </div>
</div>

For splitting I used function provided in this post

Does this helped you? @Muneeb Pullani – Shankar Gurav Feb 28 '16 at 05:45 — Shankar Gurav, Feb 28 '16 at 05:45

Repeating some list items and distribute each subsets of that list items into another repeating div elements

2 Answers2