重复一些列表项并将该列表项的每个子集分配到另一个重复的div元素中

时间:2016-02-26 04:24:08

标签: javascript angularjs

我有一些带有bootstrap的html代码,如下所示

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

我有一系列这些医院病床的名字。如何使用AngularJS将这些重复的HTML代码写入两行代码?

2 个答案:

答案 0 :(得分:1)

像这样:

 func pageViewController(pageViewController: UIPageViewController, viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {



    var vc = viewController as! cardview //crashes here with nothing in the log and it just says Thread 1: EXC_BAD_access code=1

    var index = vc.pageIndex as Int



    if (index == NSNotFound)

    {

        return nil

    }



    index++



    if (index == self.cardnamepage.count)

    {

        return nil

    }



    return self.viewControllerAtIndex(index)



}

答案 1 :(得分:0)

首先需要拆分数组,然后重复它,检查一下。

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>

对于拆分,我使用了此post

中提供的功能