Search code examples
javascriptangularjsangularjs-ng-repeatangularjs-track-by

Push to array in nested ng-repeat

<!-- Angular.JS  Form to JSON -->
  var formApp = angular.module('formApp', []).controller('formController', ['$scope', function ContactController($scope) {
      $scope.form = [];
      $scope.milestone_subindicator = {data:'',year:'' , data:'',year:''
         }
      $scope.push_form = function(){
        $scope.form.push({name:'',milestone:[]})
      };
      
      
         }]);
<!-- Form -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
{{form}} 
 <button type="button" class="success button" ng-click="push_form()">Add</button><!-- Add form -->
<body ng-app="formApp" ng-controller="formController">
<div class="row"  ng-repeat="f in form track by $index"> 
   <input type="text" placeholder="G1" data-ng-model = "f.name"></input> // name of the orgranisation
   <div class="row" ng-repeat = "mil in milestone_subindicator track by $index"> // milestones 
         
          <div class="medium-2 columns">
            <label>Data
              <input type="text" placeholder="data" ng-model="mil.data">
               <input type="text" placeholder="year" ng-model="mil.year">
            </label>
          </div>
      
        </div>   
</div>
</body>

In the example above as you can see the output of {{form}} i need to put the value of mil in milestone_subindicator to be pushed in milestone array in the form . I have no idea how do i achieve that ?

Help will be appreciated :)

Solution

  • Thank you guys .Finally,i found solution to my answer. 

      var formApp = angular.module('formApp', []).controller('formController', ['$scope', function ContactController($scope) {
      $scope.form = [];
      $scope.milestone_subindicator = {data:'',year:'' , data:'',year:''
         }
      $scope.push_form = function(){
        $scope.form.push({name:'',milestone:[]})
      };
    
      $scope.push_cat = function(index,data){
        console.log(data);
        $scope.form[index].milestone.push(data);
      };
      
      
         }]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
{{form}} 
 <button type="button" class="success button" ng-click="push_form()">Add</button>
<body ng-app="formApp" ng-controller="formController">
<div class="row"  ng-repeat="f in form track by $index">
   <input type="text" placeholder="G1" data-ng-model = "f.name"></input>
   <div class="row" ng-repeat = "mil in milestone_subindicator track by $index">
         
          <div class="medium-2 columns">
            <label>Data
              <input type="text" placeholder="data" ng-model="mil.data">
               <input type="text" placeholder="year" ng-model="mil.year">
            </label>
          </div>
     
  <button ng-click="push_cat($parent.$index,mil)">add cat</button>
        </div>   
      
</div>
</body>