Nested objects

by ckosloski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/checklist-model/0.10.0/checklist-model.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://code.angularjs.org/1.5.8/angular-mocks.js"></script>
<h4>Angular-xeditable Editable row (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
  
 <table class="table table-bordered table-hover table-condensed">
    <tr >

      <td>Wall #</td>
      <td>Measuments</td>

    </tr>
    <tr ng-repeat="(w,wall) in walls">
      <td>
         Wall #{{ wall.id || 'empty' }}

        <a href="#" editable-checklist="walls[w].appliances" e-ng-options="s as s.t for s in getAppliances() track by $index" e-checklist-value="$index"><span ng-show="!walls[w].appliances.length" >No appliances</span> <li ng-repeat="a in getWalls(w) ">{{ a.t }}</li> </a>
      </td>
      <td>
        <!-- wall measurements -->
        <span ng-repeat="(m, measurement) in wall.measurements track by $index">
          {{walls[w].measurements[m].t }} 
          <a href="#" editable-number="walls[w].measurements[m].v"> {{ walls[w].measurements[m].v || 'empty' }} </a>
        </span>
        </br>
          <!-- appliance measurements -->
           <span ng-repeat="(a, appliance) in walls[w].appliances track by $index">
              <span ng-repeat="(m, measurement) in appliance.measurements track by $index">
                {{walls[w].appliances[a].measurements[m].t}}
                <a href="#" editable-number="walls[w].appliances[a].measurements[m].v">
                {{ walls[w].appliances[a].measurements[m].v || 'empty' }}
                </a>
              </span>
              </br>
     ...

CSS

div[ng-app] { margin: 10px; }
.table {width: 100% }
form[editable-form] > div {margin: 10px 0;}

JavaScript

var app = angular.module("app", ["xeditable", "ngMockE2E","checklist-model"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter, $http) {
 $scope.walls=[];     
 $scope.appliances = [
   		{v: 6, t: 'App1',measurements:[{v:0, t: 'W:'},{v: 0, t:'H:'}]},
     {v: 7, t: 'App2',measurements:[{v:0, t: 'W:'},{v: 0, t:'H:'}]}
  ]; 
    // add wall
  $scope.addShape = function() {
    var x = 'l';
    switch (x) {
    case 'l':
        $scope.walls.push(new Wall());
        $scope.walls.push(new Wall());
        break;
      }

  };
  $scope.getAppliances = function() {
  	return $scope.appliances;
  };
    $scope.getWalls = function(wall) {
  	return $scope.walls[wall].appliances;
  };
    function Wall () 
    {
      this.id= $scope.walls.length+1;
      this.measurements= 
      [
        {v: 0, t:'W:', min:1},
        {v: 0, t:'H:', min:1}
      ];  
      this.appliances=[];
    };
});