Angular: Helper Method for Repeater

http://angularjs.org/

by sberube

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<div ng-controller="MyCtrl">

  <table class="optionsets" ng-repeat="optionSet in getOptionSetsForLayout(json.layout)" ng-class="{'last': $last}">
    <thead>
      <th class="name" colspan="2">{{optionSet.displayName}}</th>
      <th class="multiplier"></th>
      <th class="initial_price"></th>
      <th class="recurring_price"></th>
    </thead>
    <tbody>
      <tr>
        <td colspan="5" class="options">
          <!-- Child Options -->
          <table class="options">
            <tbody>
              <!-- Option -->
              <tr class="option" ng-repeat-start="optionLayout in getOptionLayoutsForOptionSet(optionSet)" tabindex="0" ng-class="{'last': $last}" ng-assign="{{field = getFieldById(optionLayout.option.fieldId)}}">
                <td class="indicator">
                  <i class="indent">&nbsp;</i>
                </td>
                <td class="name" colspan="2">
                  {{field.displayName}}
                </td>
                <td class="multiplier">
                </td>
                <td class="initial_price">
                </td>
                <td class="recurring_price">
                </td>
              </tr>

              <!-- Properties -->
              <tr class="properties" ng-class="{'last': $last}">
                <td colspan="6" class="properties">
                  <div>
                    <table class="properties">
                      <tbody>
                        <tr class="property" ng-repeat="property in optionLayout.properties.layout">
                          <td class="indicator"><i class="indent " ng-class="{ 'last':$last} ">&nbsp;</i></td>
                          <td class="name">
                            {{getFieldById(property.fieldId).displayName}}
                          </td>
                          <td class="quantity ">
                            <!-- TODO -->
                   ...

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.directive('ngAssign', function() {
  return {
    restrict: 'A'
  };
});

myApp.controller('MyCtrl', function($scope) {

  $scope.getFieldById = function(id) {
    for (var i = 0; i < $scope.json.fields.length - 1; i++) {
      var field = $scope.json.fields[i];
      if (field.id === id) {
        return field;
      }
    }
  };

  $scope.getOptionLayoutsForOptionSet = function(optionSet) {
    var result = [];

    var optionLayout = {};

    for (var i = 0; i < optionSet.layout.length - 1; i++) {
      var item = optionSet.layout[i];

      if (item.type === 'FieldLayout') {
        if (optionLayout.option) {
          result.push(optionLayout); // Add to the result since we have a new option to process.
          optionLayout = {};
        }
        optionLayout.option = item;
      } else if (item.type === 'FieldSetLayout' && item.displayType === 'property-container') {
        optionLayout.properties = item;
      } else if (item.type === 'FieldSetLayout' && item.displayType === 'option-container') {
        optionLayout.childOptionSets = item;
      }
    }
    if (optionLayout.option) {
      result.push(optionLayout);
    }

    return result;
  }

  $scope.getOptionsForOptionSet = function(optionSet) {
    var result = [];

    optionSet.layout.forEach(function(layoutItem) {
      if (layoutItem.type === 'FieldLayout') {
        result.push(layoutItem);
      }
    });

    return result;
  };

  $scope.getOptionSetsForLayout = function(layout) {
    var result = [];
    layout.forEach(function(layoutItem) {
      if (layoutItem.displayType === 'option-container') {
        result.push(layoutItem);
      }
    });

    return result;
  };

  $scope.json = {
    "id": "90cefdf2525fd6af01525fd92acc00de",
    "name": "Boba_Fett_is_my_wingman_d40d209d-13e6-4441-8489-d7922e21b55e",
    "displayName": "Boba Fett is my...