Repeater

The repeater component creates a container to display formatted information for a list of objects. As an alternative to the grid layout, repeaters are particularly effective for mobile-intensive contexts and other scenarios where you need to display information compactly.

When you create a repeater, you can specify whether to let users collapse and expand list items to hide and view their content. The default standard layout does not allow users to collapse items. The multiple-expand layout allows users to collapse and expand items as necessary. And the single-expand layout allows users to collapse and expand one item at a time.

Repeater settings

  • bb-repeater — Creates a container to display formatted information for a list of objects.
    • bb-repeater-expand-mode(Optional.) Specifies the layout for the repeater list. The layout indicates whether users can collapse and expand repeater items. Items in a collapsed state still display their titles. (Default: none)
      • none — Loads repeater items in an expanded state and does not allow users to collapse items. This standard layout provides the quickest access to the details about objects. It is best-suited for scenarios where the main content is concise and users need to view it frequently.
      • multiple — Loads repeater items in a collapsed state by default and allows users to expand and collapse items as necessary. This multiple-expand layout provides a more compact view but still allows users to expand as many items as necessary. It is best-suited for scenarios where the most important information is the titles and users only occasionally need to view the content in the body of repeater items.
      • single — Loads repeater items in a collapsed state by default and allows users to expand one item at a time. This single-expand layout provides the most compact view because users can only expand one item at a time. It is best-suited for scenarios where the most important information is the titles and users only occasionally need to view the content in the body of one repeater item at a time.
    • bb-repeater-item — Creates an item to display in the repeater list.
      • bb-repeater-item-selection-toggled(Optional.) Specifies a callback that will be executed when a user toggles the repeater item selection. It has the following arguments:
        • isSelected — Set to true if the repeater item is selected, set to false otherwise.
      • bb-repeater-item-expanded(Optional.) Indicates whether to load an item in expanded mode. It can also specify to expand the item programmatically after the item loads. To load an item in expanded mode, set this flag to true. (Default: false)
      • bb-repeater-item-selectable(Optional.) Indicates whether to display a checkbox in the left of the repeater item. (Default: false)
      • bb-repeater-item-selected(Optional.) Specifies whether the repeater item is selected (i.e. its checkbox is checked). When the user selects the repeater item the specified property on your model will be updated accordingly.
      • bb-repeater-item-input-label(Optional.) Text applied to the aria-label of the repeater item checkbox when the repeater item is selectable. If not specified, any text contained in the bb-repeater-item-title will be applied to the aria-label.
      • bb-repeater-item-context-menu — Specifies a context menu to display beside the repeater title. To specify actions to include in the context menu, use the bb-context-menu directive within this property.
      • bb-repeater-item-title — Specifies a title to identify an object in the repeater list. The title is particularly important for expandable repeater layouts because it remains visible when users collapse items.
      • bb-repeater-item-content — Specifies the content to display in the body of a repeater item. The content to display depends on the type of object and the use case that the repeater supports.

Demo

Mark completed Edit
  • Delete
    {{item.title}}
    {{item.status}}
    {{item.note}}

    Markup

    <div ng-controller="RepeaterTestController as repeaterCtrl">
      <div class="form-group">
        <label>
          Expand mode
          <select class="form-control" ng-model="repeaterCtrl.expandMode">
            <option value="none">
              None
            </option>
            <option value="single">
              Single
            </option>
            <option value="multiple">
              Multiple
            </option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label>
          <input type="checkbox" bb-check ng-model="repeaterCtrl.showContextMenu" /> Show context menu
        </label>
      </div>
      <div class="form-group">
        <label>
          <input type="checkbox" bb-check ng-model="repeaterCtrl.showTitle" /> Show title
        </label>
      </div>
       <div class="form-group">
        <label>
          <input type="checkbox" bb-check ng-model="repeaterCtrl.showCheck" /> Show checkbox
        </label>
      </div>
      <button type="button" class="btn btn-primary" ng-click="repeaterCtrl.addItem()">Add an item</button>
      <div class="row">
        <div class="col-md-6">
          <bb-repeater bb-repeater-expand-mode="{{repeaterCtrl.expandMode}}">
            <bb-repeater-item ng-repeat="item in repeaterCtrl.items" bb-repeater-item-expanded="item.expanded" bb-repeater-item-selectable="{{repeaterCtrl.showCheck}}" bb-repeater-item-selected="item.isSelected">
              <bb-repeater-item-context-menu ng-if="repeaterCtrl.showContextMenu">
                <bb-context-menu>
                  <bb-context-menu-item>Mark completed</bb-context-menu-item>
                  <bb-context-menu-item>Edit</bb-context-menu-item>
                  <li class="divider"></li>
                  <bb-context-menu-item>Delete</bb-context-menu-item>
                </bb-context-menu>
              </bb-repeater-item-context-menu>
              <bb-repeater-item-title ng-if="repeaterCtrl.showTitle">
                <div class="pull-left">
                  {{item.title}}
                </div>
                <div class="pull-right">
                  <span class="label" ng-class="repeaterCtrl.getStatusCls(item)">{{item.status}}</span>
                </div>
              </bb-repeater-item-title>
              <bb-repeater-item-content>
                <div>
                  {{item.note}}
                </div>
              </bb-repeater-item-content>
            </bb-repeater-item>
          </bb-repeater>
        </div>
      </div>
    </div>
    

    JavaScript

    /*global angular */
    
    (function () {
        'use strict';
    
        function RepeaterTestController() {
            var vm = this;
    
            vm.expandMode = 'none';
            vm.showContextMenu = true;
            vm.showTitle = true;
            vm.showCheck = false;
    
            vm.items = [
                {
                    title: 'Call Robert Hernandez',
                    note: 'Robert recently gave a very generous gift.  We should call him to thank him.',
                    status: 'Completed',
                    statusType: 'success'
                },
                {
                    title: 'Send invitation to ball',
                    note: 'The Spring Ball is coming up soon.  Let\'s get those invitations out!',
                    status: 'Past due',
                    statusType: 'warning'
                }
            ];
    
            vm.addItem = function () {
                var next = vm.items.length + 1;
                vm.items.push({
                    title: 'New reminder ' + next,
                    note: 'This is a new reminder',
                    expanded: true,
                    status: 'Active',
                    statusType: 'info'
                });
            }
    
            vm.getStatusCls = function (item) {
                return 'label-' + item.statusType;
            }
        }
    
        angular.module('stache')
            .controller('RepeaterTestController', RepeaterTestController);
    }());