AngularJS - Лучший способ повторить создание cols

Question

AngularJS - Лучший способ повторить создание cols

0

Я хочу получить следующий результат:

<div class="row">
    <div class="col-md-4>
        <input type="checkbox"> Item 1
        <input type="checkbox"> Item 2
        <input type="checkbox"> Item 3
        <input type="checkbox"> Item 4
    </div>
    <div class="col-md-4>
        <input type="checkbox"> Item 5
        <input type="checkbox"> Item 6
        <input type="checkbox"> Item 7
        <input type="checkbox"> Item 8
    </div>
    <div class="col-md-4>
        <input type="checkbox"> Item 9
        <input type="checkbox"> Item 10
        <input type="checkbox"> Item 11
        <input type="checkbox"> Item 12
    </div>
</div>

И у меня в контроллере моя переменная:

$scope.items = ["Item 1", "Item 2", "Item 3", "Item 4", ...];

Я не могу найти чистый путь (без ng-ifs, вычисление% итерации и т.д.) Для ng-repeat с ng-repeat и получения этого результата. Есть ли?

Заранее спасибо.

João Menighin 25 июнь 2015, в 16:22

Источник

Теги:

angularjs

angularjs-ng-repeat

2 ответа

0

Если вы хотите разделить его на 3 divs каждый с 4-мя галочками, вы можете изменить свою переменную следующим образом:

$scope.items = {"div1":["Item 1", "Item 2", "Item 3", "Item 4"],
                "div2":["Item 5", ..... ],
                "div3":[.........] };

то ваш html:

<div class="row">
    <div class="col-md-4" ng-repeat="divs in items">
         <input type="checkbox" ng-repeat="checkbox in divs track by $index" value="{{checkbox}}">
    </div>
</div>

Guinn 25 июнь 2015, в 10:54

0

Спасибо за ответ Гуинн, дело в том, что моя переменная "items" на самом деле исходит из веб-сервиса. Я действительно могу сделать некоторую обработку на нем, но я бы предпочел не делать этого.
João Menighin 25 июнь 2015, в 13:38
1

Ах, хорошо, в этом случае ссылка на cubbuk должна дать ответ, с которым вы можете работать!
Guinn 25 июнь 2015, в 13:40

Ещё вопросы

Спасибо за ответ Гуинн, дело в том, что моя переменная "items" на самом деле исходит из веб-сервиса. Я действительно могу сделать некоторую обработку на нем, но я бы предпочел не делать этого.
Ах, хорошо, в этом случае ссылка на cubbuk должна дать ответ, с которым вы можете работать!

adam0101 · Accepted Answer · 2015-06-25T11-39-00.000Z

Будет ли это работать для вас?

<div ng-controller="ExampleController">
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <div ng-repeat="item in items | limitTo:4:0">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
      <div class="col-xs-4">
        <div ng-repeat="item in items | limitTo:4:4">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
      <div class="col-xs-4">
        <div ng-repeat="item in items | limitTo:4:8">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
    </div>
  </div>
</div>

Если вы хотите динамическое число столбцов, вам нужно сначала вычислить количество столбцов. Вы можете сделать это, используя $scope.cols = new Array(Math.ceil($scope.items.length/4)); в вашем контроллере, затем выполните цикл, используя это:

<div ng-controller="ExampleController">
  <div class="container">
    <div class="row">
      <div class="col-xs-4" ng-repeat="col in cols track by $index" ng-init="colIndex = $index">
        <div ng-repeat="item in items | limitTo:4:(colIndex*4)">
          <input type="checkbox" /> {{item}}
        </div>
      </div>
    </div>
  </div>
</div>

Спасибо Адам, я заканчиваю свой код прямо сейчас, и он очень похож на ваш второй код. Я использую Angular 1.2, поэтому мне пришлось реализовать некоторые фильтры самостоятельно, но да, это хороший способ.