Angular: ng-repeat scope - 14410993

http://angularjs.org/

by Chandana Thota

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="addCycleParent()">
    Add Parent
  </button>
  <ul>
    <li ng-repeat="cycle in Cycles">
      {{cycle.name}} {{$index}}
      <ul>
        <li ng-repeat="subinfo in cycle.cycleData">
          {{subinfo.name}} {{$index}}
          <button ng-click="removeChild($parent.$index, $index)">remove me</button>
        </li>
      </ul>
      <button ng-click="addCycleData($index)">
        Add Child
      </button>
      <button ng-click="removeParent($index)">
        remove parent
      </button>
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</div>

JavaScript

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

function MyCtrl($scope) {

  $scope.Cycles = [{
    name: "Cycles",
    cycleData: []
  }];

  $scope.addCycleParent = function() {
    $scope.Cycles.push({
      name: "Cycles",
      cycleData: []
    });
  }

  $scope.addCycleData = function(index) {
    $scope.Cycles[index].cycleData.push({
      name: "test"
    });
  };

  $scope.removeChild = function(parentIndex, index) {
    $scope.Cycles[parentIndex].cycleData.splice(index, 1);
  };

  $scope.removeParent = function(index) {
    $scope.Cycles.splice(index, 1);
  };

}